Uma dúvida muito comum de alunos e iniciantes: como centralizar o conteúdo numa janela de navegador? Realmente é um recurso bastante útil, já que aproveita o espaço de maneira uniforme e se adapta a qualquer tamanho de janela.
Veja, abaixo, um código que centraliza o conteúdo. Observe que as divs posteriores são criadas aninhadas, ou seja, dentro da div “conteúdo”:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Centralizando com CSS</title><style type=”text/css”>
html, body, #conteudo{height:100%;}
body{text-align:center;}
#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}.esquerda{
position:absolute;
top:10px;
left:10px;
width:245px;
background-color:#00FF00;}.centro{position:absolute;
top:10px;
left:265px;
width:245px;
background-color:#ffff00;}.direita{
position:absolute;
top:10px;
left:520px;
width:265px;
background-color:#ccff33;}.dentro{
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
width:245px;
color:#FFFFFF;
background-color:#000000;}
</style>
</head>
<body><div id=”conteudo”>
<div class=”esquerda”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br /><div class=”dentro”>
div dentro do div “esquerda!<br />
</div>
</div>
<div class=”centro”>
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
</div>
<div class=”direita”>Oi, teste de posicionamento<br />
Oi, teste de posicionamento<br />
Oi, teste de posicionamento
</div>
</div>
</body>
</html>
Experimente este código em sua página e faça suas modificações. Teste, ele funciona nos dois browsers (ie e firefox) principais. ok?
Entendendo o código
Para se atingir este objetivo, a utilização de elementos div foi essencial. Observe o seguinte trecho do código:
html, body, #conteudo{height:100%;}
Aqui, os elementos html, body (o corpo da página, parte visível ao usuário) e a div id “#conteúdo”, tiveram suas respectivas alturas definidas como 100%, ou seja, independente do tamanho da janela do browser(navegador), elas ocuparam toda a altura disponível.
Já neste trecho:
body{text-align:center;}
O body é utilizado como seletor de css para centralizar o conteúdo geral. Na verdade, com esta atribuição, o elemento principal da página (#conteudo), estará sempre centralizado.
#conteudo{
width:796px;
border: 2px #666666;
position:relative;
background-color:#CCCCCC;
margin:auto;}
A div id “#conteudo” será utilizada como div principal, todas as outras divs estarão dentro (aninhadas) a ela. Assim, é possível controlar a centralização dos elementos. A largura, definida como “width:796px”, tem o tamanho ideal para resolução de 800×600. Foi definida uma borda (border: 2px #666666), por razões estéticas, o mesmo acontecendo com a cor de fundo (background-color:#CCCCCC). O posicionamento foi definido como relativo (position:relative;) à página (elemento html e body). A margem está definida como automática (margin:auto).
Note que as div criadas posteriormente (esquerda, centro, direita) são inseridas dentro da div “#conteudo”, ou seja, suas tags são abertas e fechadas dentro da div principal, fazendo com que elas fiquem “dentro” da mesma. Todas estão com o atributo “position:absolute;”, para que o posicionamento seja absoluto com relação ao elemento pai (“#conteudo”), não à página.
Finalizando, foi inserida a div “dentro”, inserida dentro da div “esquerda”, demonstrando que é possível inserir divs dentro de divs indefinidamente. Porém, com critério e organização.