Centralizar div com css
Postado em 01 de setembro de 2009. Em Dicas, desenvolvimento web
Desde que eu comecei a desenvolver sites seguindo um padrão tive muitos problemas na centralização de uma div no navegador, aonde eu consequia centralizar no mozilla e no IE ficava desconfigurado.
Bem, para quem o mesmo problema que eu tive, veja a abaixo a solução.
Sigamos a estrutura a seguir dentro do body.
<body> <div id="geral"> <div id="corpo"> conteudo </div> </div> </body>
E dentro do seu style ou se preferir colocar dentro de um .css o código a seguir
body{
background-color:#efefef; /*um fundo para visualizar a div*/
margin:0px;
padding:0px;
text-align:center; /* bug do IE 6*/
}
#geral{
margin:0 auto;
width:900px;
background-color:#FFF; /*um fundo para visualizar a div*/
text-align:left;
}
#corpo{
padding:10px;
}
3 comentário
16 de setembro de 2009
Fernando com a iniciativa de ajuda em seu blog, quero postar a minha solução:
#divCentralizada
{
position:absolute;
left:50%;
width:300px;
margin-left:-150px;/* ((largura/2)*-1) */
height:auto;
/*Estilinhos*/
border:1px solid #009;
background-color:#CCC;
}
Conteudo da DIV
Abraço, Victor.
16 de setembro de 2009
Bem victor, no caso de usar o position:absolute, em certos casos ao mecher no tamanho do browser o conteudo some….
21 de setembro de 2010
Nossa, muito bacana, sempre tinha a maior dificuldade e nunca ficava igual em todos os navegadores, parabéns