Centralizando o conteúdo com (x)html e css
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?
Acompanhe, no próximo post, a explicação do código!
Manda ver!