pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Centralizando layout com CSS – parte I

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.

Parti do princípio que são raras as pessoas que usam resoluções menores que 800 X 600.

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á

Categorias: CSS | Tags: |

5 Comentários

  1. Naum deu certo, patrão…

  2. @Chicko, em qual navegador nao conseguiu?

  3. Funcionou que foi uma bleza!
    Agora é cair no resto dos hacks para IE (a microsoft tinha que pagar a gente pra fazer isto!)
    Valew

  4. 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.

  5. Muito bom tirou minha dúvida

Topo