¿Cómo centrar un div completamente posicionado dentro de IE7?

Question

ACTUALIZADO proporcionar un contexto para el diseño

tengo una estructura relativamente simple para mi página. La página está compuesta de dos div's ambos posicionados de manera absoluta. Uno está centrado dentro del otro.

<div id="protocol_index_body_wrapper"> 
    <div id="protocol_index_body"> 
    </div> 
</div> 

que tiene el CSS correspondiente:

#protocol_index_body_wrapper { 
    background: url("/images/stripe.png") repeat scroll 0 0 transparent; 
    position: absolute; 
    top: 120px; 
    left: 0px; 
    right: 0px; 
    bottom: 10px; 
} 
#protocol_index_body { 
    width: 960px; 
    margin: 0 auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 

} 

El comportamiento esperado se ve en la imagen de arriba. Este comportamiento está presente en IE8, Firefox y Chrome. Sin embargo, en IE7, el div que debe estar centrado está alineado con el lado izquierdo. ¿Algunas ideas?

Answer 1

text-align:center a la envoltura, o <div align=center> (feo, lo sé, pero funciona)

o con JS:

document.getElementById("protocol_index_body_wrapper").style.marginRight = (document.body.clientWidth - 50)/2_+"px" 

funciona sólo sobre IE6 +.

Answer 2

Prueba esto:

#protocol_index_body { 
    width: 50px; 
    margin: 0 auto 0 -25px; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    right: 0; 
    bottom: 0; 
    background-color: red; 
} 

O ...

#protocol_index_body { 
    width: 50px; 
    margin: 0 auto 0 50%; 
    position: absolute; 
    top: 0; 
    left: -25px; 
    right: 0; 
    bottom: 0; 
    background-color: red; 
} 

Answer 3

a menos que necesite el div padre para tener una anchura de líquido (que sería un poco tonto cuando se está configurando el niño ancho de div), ¿por qué no simplemente establecer el ancho del div principal y agregar margin:0 auto?

Answer 4

Está bien que jugó un rato con él y esto funciona idéntica en FF, Opera y Internet Explorer 7:

#protocol_index_body_wrapper { 
    background-color:black; 
    padding: 0 0 20px 0; 
    position: absolute; 
    top: 120px; 
    left: 0px; 
    right: 0px; 
    bottom: 10px; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
} 
#protocol_index_body { 
    width: 50px; 
    margin: 0 auto; 
    background-color: red; 
    height: 100%; 
} 

Answer 5

autoCenterAlign = function() { 

    var bodyWidth = $("body").innerWidth(); 
    var protocolWidth = $("#protocol_index_body").innerWidth(); 
    if(protocolWidth < bodyWidth) { 

     $("#protocol_index_body").css("left",((bodyWidth-protocolWidth)/2)+"px"); 

    } 

} 

window.onload = autoCenterAlign; 
window.onresize = autoCenterAlign; 
jQuery(window).load(function() { 

    autoCenterAlign() 

});