IE7内に絶対配置されたdivをどのように配置するのですか？

Question

私は私のページのための比較的単純な構造を有していレイアウト

の背景を提供更新しました。このページは2つのdivの両方が絶対的に配置されて構成されています。 1つは他のものの中心にある。

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

} 

期待される動作は、上記の画像に見られる：対応するCSSを持って

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

。この動作はIE8、Firefox、およびChromeに存在します。しかし、IE7では、中央に配置されるdivは左側に並んでいます。何か案は？

やJSとラッパーへ

Answer 1

text-align:center、または<div align=center>（醜い、私は知っているが、作品）：

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

作品のみIE6 +上。

Answer 2

これを試してみてください：

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

かを...

#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

あなたは子供を設定しているときに少し愚かなことでしょう流体の幅を（持っている親のdivを必要としない限り、 divの幅）、親divの幅を設定してmargin:0 autoを追加するだけではどうですか？

Answer 4

わかりました、私はそれで遊んこれはFF、オペラ座、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() 

});