Este post foi migrado lá do Melancia na Cabeça. Ele tem muito tempo, está desatualizado, mas estou mantendo só por razões históricas. Um dia eu refaço 🙂
Post para alavancar minhas visitas. Sei que vai ter um montão de gente batendo aqui procurando por isso (liga risada maléfica)Muahuahua(desliga risada maléfica).
Uma das dúvidas mais populares de quem está começando a mexer com html e css é como centralizar seu layout. Existem muitas formas de fazer isso – algumas boas e outras nem tanto.
Começo pela melhor (a que eu uso e passo para quem trabalha comigo):
Width 100% no HTML body + margin 0 auto e clear both na div que envolve todo mundo
fica assim:
HTML, body {
width: 100%;
}
div#geral {
clear: both;
margin: 0 auto;
width: 775px; /* Não esqueça desse tamanho aqui */
}A largura obviamente varia conforme a sua necessidade.
outra boa também é:
text-align no body e na div que envolve todo mundo
o código:
body {
text-align: center; /* Isso aqui é pro IE*/
}
div#geral {
margin: 0 auto;
text-align: left;
}Uma que não recomendo usar, mas que tem um conceito útil para outras coisas é:
Position absolute com margin negativa da metade
Uma breve explicação: você coloca o layout começando no meio e “volta” com ele a metade do seu tamanho para que ele fique centralizado. Para layouts com largura de 770px, por exemplo, deve-se dar uma margem negativa de 385px.
div#geral {
position: absolute;
top:0;
left: 50%;
margin-left: -385px;
}O código:
O princípio para centralizar verticalmente é o mesmo – 50% no top e “volta” com o layout pra cima com margin-top negativa, mas será que alguém ainda centraliza layout verticalmente?
Uma observação: onde tem div#geral você substitui com div#<id_da_div_que_envolve_tudo>.
Reli e faltou uma: a tag center. Simplesmente finja que não existe. É melhor.
Abraços!