Essa é a primeira matéria de como centralizar o site.
Uma dúvida muito comum para quem está iniciando no mundo do CSS é:
“Como faço para centralizar meu layout com CSS.”
Uma forma de mostrar todo seu layout, sem a barra de rolagem na horizontal e independente da resolução do usuário, é definir uma largura fixa para a DIV que engloba todo o conteúdo e depois centralizá-la na tela. Assim o usuário que acessar seu site com uma resolução maior terá o site centralizado. O usuário que acessar com a resolução definida por você vai ter o site preenchendo toda a tela.
Temos duas formas de centralizar uma DIV:
Vamos a marcação (X)HTML para os exemplos:
(X)HTML:
... <body> <div id=”conteiner”> … Aqui vem o conteúdo da sua página ... </div> </body>
CSS:
Body {text-align:center;}/* Centraliza no IE6*/
#conteiner
{
width:760px;
margin:0 auto;
text-align:left; /*volta o alinhamento padrão*/
}
A declaração responsável por centralizar a página em navegadores padrões (Firefox, Opera…) é a declaração margin:0 auto;
O navegador calcula as margens esquerda e direita subtraindo a largura total disponível da largura declarada (no nosso caso a largura declarada para o elemento é 760px) e depois divide por 2. O resultado é a margem que o navegador vai deixar do lado esquerdo e direito.
Vamos trabalhar com números para ficar mais claro.
Exemplo:
O suário que entrou no seu site e está com uma resolução igual a 1024.
O navegador faz o seguinte cálculo:
(1024px-760px) = 264px/2 = 132px
Ou seja, 132px (aproximadamente, temos que descontar a barra de rolagem do navegador) para o lado esquerdo e direito respectivamente.
O Internet Explore 6 não suportam a declaração margin:0 auto e erradamente interpreta a declaração text-align:center para centralizar texto e o contêiner.
A outra forma mostrarei no próximo post. Até lá
Comentários
5 respostas para “Centralizando layout com CSS – parte I”
Naum deu certo, patrão…
@Chicko, em qual navegador nao conseguiu?
Funcionou que foi uma bleza!
Agora é cair no resto dos hacks para IE (a microsoft tinha que pagar a gente pra fazer isto!)
Valew
Olá amigo,
A técnica funcionou perfeitamente, mas o problema é que o site eu já tinha pronto e agora meu rodapé fica no meio do conteúdo, como fazer para ajustar isso?
Agradeço vossa dica, continue o bom trabalho.
Muito bom tirou minha dúvida