IE7'de kesinlikle konumlandırılmış bir div nasıl ortalanır?

Question

DÜZENİ benim sayfa için nispeten basit bir yapıya sahip

İÇİN bağlam temin GÜNCELLEME. Sayfa, her ikisi de kesinlikle konumlandırılmış iki divdan oluşmaktadır. Biri diğerinin ortasında.

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

} 

beklenen davranış, yukarıdaki resimde görüldüğü: karşılık gelen CSS içeriyor

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

. Bu davranış IE8, Firefox ve Chrome'da bulunur. Ancak, IE7'de ortalanması gereken div sol tarafa doğru akıyor. Herhangi bir fikir?

veya JS ile sargıya

Answer 1

text-align:center veya <div align=center> (çirkin, biliyorum, ama işleri):

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

eserler sadece IE6 + 'da.

Answer 2

bu deneyin:

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

Ya da ...

#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

Eğer çocuğu belirlerken, biraz aptalca olurdu bir sıvı genişliğe (olması üst div gerekmedikçe div'un genişliği), neden sadece ebeveyn div genişliğini ayarlayıp margin:0 auto ekleyelim?

Answer 4

Tamam onunla etrafında oynanan ve bu FF özdeş çalışır Opera ve 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() 

});