Come centrare un div in posizione assoluta all'interno di IE7?

Question

AGGIORNATO CONFERIMENTO CONTESTO per il layout

ho una struttura relativamente semplice per la mia pagina. La pagina è composta da due div entrambe posizionate in modo assoluto. Uno è centrato nell'altro.

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

che ha il CSS corrispondente:

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

} 

Il comportamento previsto è visto nell'immagine sopra. Questo comportamento è presente in IE8, Firefox e Chrome. Tuttavia, in IE7 il div che dovrebbe essere centrato è a filo contro il lato sinistro. Qualche idea?

Answer 1

text-align:center per l'involucro, o <div align=center> (brutto, lo so, ma opere)

o con JS:

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

funziona solo su IE6 +.

Answer 2

Prova questo:

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

Oppure ...

#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 meno che non è necessario il div genitore di avere una larghezza di fluido (che sarebbe un po 'sciocco quando si sta impostando il bambino div's width), perché non impostare la larghezza del div del genitore e aggiungere margin:0 auto?

Answer 4

Va bene ho giocato intorno con esso e questo funziona identica in FF, Opera e IE7:

#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() 

});