Centralizando Layout com CSS

Em css, o método mais utilizado para centralizar um layout, é o das margens.

Suponha que você tenha um container e queira centralizalo na tela do navegador. Você poderia ajustar diversos valores para margens esquerda ou direita até centraliza-lo, mas isso fica meio complicado quando você não sabe a resolucão do usuário. Então existe a necessidade de um método que o faça automaticamente.

É o seguinte:

#container{
margin:0 auto 0 auto;
}

Básicamente atribuimos o valor “auto” para as margens esquerda e direita.
Mas no IE5 isso não funciona, então caso você queira compatibilidade com ele adicionamos:

body{
text-align:center;
}

#container{
margin:0 auto 0 auto;
text-align:left;
}

Vale lembrar que citei o método do IE5 apenas por motivos históricos, pois hoje em dia ninguem mais cria sites para IE5, portanto use text-align:center apenas se desejar.

Fica mais essa dica.

Abraços!

Posts relacionados

• 28/02/2009 -- Recomendação de Livros para Web Design
• 15/12/2008 -- Bug da margem duplica no Internet Explorer 6
• 14/12/2008 -- Problemas com floats - Desobstruindo floats
• 14/12/2008 -- CSS para Inspiração
• 26/02/2009 -- Solução para o Flicker Bug

(1 votes, average: 5,00 out of 5)

 Loading ...