CSS: Centralizar Horizontal e Vertical #2

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
width:100%;
height:100%;
padding: 0px;
margin: 0px;
}

#table {
width: 100%;
height: 100%;
position: static;
display: table;
*overflow: hidden; /* hack para o IE6 e IE7 */
*position: relative; /* hack para o IE6 e IE7 */
}

#cell {
vertical-align: middle;
display: table-cell;
position: static;
*top: 50%; /* hack para o IE6 e IE7 */
*position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
top: -50%;
width: 500px;
margin: auto;
position: relative;
background: red;
}

link para o outro post e comentários

3 thoughts on “CSS: Centralizar Horizontal e Vertical #2

  1. Alexandre

    Ok… resolvi por aqui… Obrigado pela base… Até semana passada estava vendo o outro post… “style.css” é o de não-IE e “styleIE.css” é para IE 6 ou 7…

    <head>
    <style type=”text/css”>
    @import url(“http://www.comp.ufscar.br/~ayharano/style.css”);
    </style>
    <!–[if (IE 6)|(IE 7)]>
    <link rel=”stylesheet” type=”text/css” href=”http://www.comp.ufscar.br/~ayharano/styleIE.css”>
    <![endif]–>
    </head>
    <body>
    <div id=”table”>
    <div id=”cell”>
    <div id=”all”>
    </div>
    </div>
    </div>
    </body>

    Obrigado e até mais… lt e gt são uteis…

    Responder

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s