Sidebar

Fernando Softov | Centralizar div com css
71
post-template-default,single,single-post,postid-71,single-format-standard,ajax_fade,page_not_loaded,smooth_scroll,boxed,wpb-js-composer js-comp-ver-3.6.12,vc_responsive

Centralizar div com css

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;
}

Veja o exemplo aqui

AUTHOR - admin

3 Comments

0
  • Victor F. Fogaça

    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.

    • admin

      Bem victor, no caso de usar o position:absolute, em certos casos ao mecher no tamanho do browser o conteudo some….

  • Fonor

    Nossa, muito bacana, sempre tinha a maior dificuldade e nunca ficava igual em todos os navegadores, parabéns

Post A Comment