10 de julho de 2007

Centralizando a pagina com CSS

Estive treinando algumas coisas usando html e css, e trago pra vocês um artigo explicando como se centraliza uma pagina usando css.
A técnica é bem simples,mas como sempre o Internet Explorer, não reconhece a regra utilizada. Mas a uma solução.Chega de conversa e vamos para o código:


O HTML



<div id="geral">
<!-- Restante do Codigo HTML -->
</div>


O que há de importante nesse html? Para usar o efeito de centralizar a pagina,precisa de uma "div-mãe" que no exemplo eu vou dar o nome de "geral".


CSS



body {
text-align: center; /* Faz funcionar no IE, mas faz os texto ficaram centralizados.*/
}
div#geral {
width: 760px; /* Um layout projetado para 800 x 600 não deve ocupar 800 de largura,e sim um pouco menos por causa da barra de rolagem*/
margin: 0 auto; /* Define o topo com 0 de margem e centraliza a div. Mas não funciona no IE*/
text-align: left; /* Faz o texto voltar para a esquerda */
}

Primeiro se define um tamanho para a div,depois alinha essa div (que contem todo o restante do código do site) no meio,e o text-align: center faz funcionar no ie.


Aprendi isso aqui: Video tutorial 7 - Centrlizando o layout

1 comentários:

Tiago Celestino disse...

O "margin:0 auto" funciona corretamente no IE. É só definir o tamanho que ele pega, as vezes o maldito não calcula corretamente o valor e dá uns bragas. :D