Centro absoluto com CSS
Uma das formas mais comuns de exibir layouts HTML é centralizar o conteúdo. Um recurso eficiênte é utilizar regras CSS para fazer o trabalho.
O modelo apresentado cria uma classe para fazer divisões horizontais e dentro dessas divisões alinhar o conteúdo.
Comentários no código.
/* A classe 'estrutura' serve somente como estrutura para o conteúdo que será centralizado. Utilizamos width em 100% para aproveitar a largura total do navegador. */ .estrutura { width: 100%; margin: 0; padding: 0; background-color: #CCC; float: left; } /* A classe 'conteudo' é responsável por centralizar o conteúdo HTML. */ .conteudo { /* largura do o layout */ width: 1000px; /* posição relativa */ position: relative; /* posicionada a 50% de distância da margem esquerda */ /* para alinhar a div exatamente no centro. */ left: 50%; /* 'margin: 0 0 0 -500px;' alinha -500px para a esquerda, orientando a div pelo centro absoluto. O valor deverá ser negativo e igual a metade do valor informado anteriormente em 'width'. */ margin: 0 0 0 -500px; padding: 0; /* para garantir o funcionamento no IE */ display: inline; background-color: #FFF; float: left; }
Assim teremos o HTML:
<html> .... <body> <div class="estrutura"> <div class="conteudo"> <h1> Conteúdo Centralizado </h1> </div> </div> </body> </html>
Para ver um exemplo clique aqui.
Gostou? Compartilhe!
[…] This post was mentioned on Twitter by Blackjack, Tiago Pastorello. Tiago Pastorello said: RT @vinteum Blackjack » Centro absoluto com CSS https://retwt.me/1PC9j […]
Meu querido @tpastorello, esse post foi a luz do meu caminho hoje e garanto que vai ser de muita gente, tava procurando uma solução que deixasse as colunas laterais da página fluidas (nem precisei criá-las heheh) e o centro com tamanho fixo e vc ajudou muito com a dica acima… tá de parabéns! sucesso com o blog!
aa propriedade margin: auto já nao resolve isso ?