Um problema comum para web designers é centrar conteúdos numa página web
O modelo actual do (X)HTML e do CSS é ver cada documento Web como uma área não limitada e, uma janela de navegador como uma vista para esse documento e não uma parte do mesmo. Daí ser impossível centrar um documento em qualquer janela de navegador.
No entanto por vezes é absolutamente necessário centrar verticalmente uma página ou páginas. Há essencialmente três formas de o fazer: através da combinação de JavaScript e posicionamento absoluto CSS; ou através de métodos arcaicos HTML (usando um arranjo de uma só célula de tabela); ou podemos usar regras de estilo CSS para esticar o documento até 100% da janela do navegador em altura e depois centrar verticalmente o resto da página. O método QuircksMode pode ser usado para esticar o documento. É realmente simples. Só é necessário encontrar o elemento (X)HTML que é para o navegador o equivalente da sua janela - a combinação html e body é suficiente para a generalidade dos principais navegadores e depois definir uma divaninhada com posicionamento absoluto.
(Pode ainda ajustar-se as características desta div com atributos overflow, min/max width/heightetc.)
O código resultante seria algo como (substituir ... por valores adequados ao seu caso):
<... (veja o método QuircksMode para decidir que doctype...>
<html>
<head>
<title>Processo de Centragem Vertical da Victoria
- Página de Teste</title>
<style type="text/css">
html, body { background-color: blue;
height: 100%;
margin: 0;
padding: 0;
color: yellow;
text-align: center; }
div#centered { border: 0;
background-color: white;
height: 50%;
width: 50%;
position: absolute;
left: 25%;
top: 25%;
color: black; }
</style>
</head>
<body>
<div id="centered">
div centrada verticalmente
(<a href="http://vmalek.murphy.cz"
title="Processo de Centragem
Vertical da Victoria">
Ver comentários acima</a>).
</div>
</body>
</html>
Mensagens
Sem comentários:
Enviar um comentário