No último post sobre CSS vimos como centralizar o layout utilizando margens automáticas, propriedade margin:o auto. Nesse segundo post sobre centralizar layout usando CSS vou mostrar uma oura forma. A técnica consiste em declarar posicionamento relativo e margem negativa para a div. Nesse modo não precisamos colocar a declaração text-align:center no body, como foi feito na outra técnica.
A marcação (X)HTML:
<div id=”conteiner”> … Aqui vem o conteúdo da sua página ... </div>
CSS:
#conteiner{
width:760px;
position:relative;
left:50%;
}
Só a regra CSS acima não é suficiente, já que a declaração position relative irá afastar o elemento 50% da margem esquerda do navegador. Esse valor é contado a partir da borda esquerda do elemento e não do centro do elemento. Para o elemento ficar no centro da tela, é só puxar ele com a metade do seu valor de largura para a esquerda.
#conteiner{
width:760px;
position:relative;
left:50%;
margin-left:-380px;/*metade do valor total da div*/
}
Termina aqui o segundo artigo sobre centralizar layout com CSS.
Abraços!