¿Como centro mi DIV con JS(Css) en IE8 independientemente del tamaño del DIV?

quico5 · #1 (**permalink**) 15/05/2012, 04:06

la idea es que se centrase automáticamente sin poner 500/200 en los padding

Estatico:

Cita:

padding-left: expression(((document.body.offsetWidth-500)/2)-2);
padding-top: expression(((document.body.offsetHeight-200)/2)-2);

Dinámico:

Cita:

padding-left: expression(((document.body.offsetWidth-width_#contenido)/2)-2);
padding-top: expression(((document.body.offsetHeight-height_#contenido)/2)-2);

Cita:

<!doctype html>

<div id="contenido">
Acá irá el contenido de nuestra página. Debe tener un alto definido.
</div>

<style>

html{
background:silver;
display: table;
height: 100%;
margin: auto;
padding-left: expression(((document.body.offsetWidth-500)/2)-2);
padding-top: expression(((document.body.offsetHeight-200)/2)-2);
}
body{
display: table-cell;
vertical-align: middle;
}
#contenido{
background:white;
height: 200px;
line-height: 200px;
text-align: center;
vertical-align: middle;
width: 500px;
}
</style>

quico5 · #2 (**permalink**) 15/05/2012, 04:18

ya lo he resuelto buscando ejemplos en google

padding-left: expression(((document.body.offsetWidth-getElementById(contenido).offsetWidth)/2)-2);
padding-top: expression(((document.body.offsetHeight-getElementById(contenido).offsetHeight)/2)-2);

djaevi · #3 (**permalink**) 15/05/2012, 06:35

Para alinear un div con css existe un truco muy bueno que consiste en darle un left o top 50% y luego hacer un margin-left/top: - (mitad del ancho del div).

Por Ej:

Código CSS:

Ver original#contenedor {
position:absolute;
width:1000px;
height:800px;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-400px;
}

Esto sirve siempre y cuando claro sepas de antemano el tamaño de tu div

Saludos