pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

Centralizando layout com CSS – parte II

| 0 Comentários

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!

Categorias: CSS |

Deixe uma resposta

Campos obrigatórios *.



*

Topo