Rogério Lino

CSS: Centralizar Horizontal e Vertical #2

Posted by: Rogério Alencar Lino Filho on: 29 Outubro, 2007

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 Respostas para "CSS: Centralizar Horizontal e Vertical #2"

OK… Mas você poderia colocar um exemplo de <div id=”valor”>… É table, cell, conteudo, nessa ordem?

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…

Deixe uma Resposta

Categorias