Làm cách nào để căn giữa div vị trí hoàn toàn trong IE7?

Question

CẬP NHẬT cung cấp bối cảnh cho cách bố trí

Tôi có một cấu trúc tương đối đơn giản cho trang web của tôi. Trang này bao gồm hai div của cả hai hoàn toàn vị trí. Một là trung tâm trong khác.

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

Trong đó có các CSS tương ứng:

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

} 

Các hành vi mong đợi được nhìn thấy trong hình trên. Hành vi này hiện diện trong IE8, Firefox và Chrome. Tuy nhiên, trong IE7 div cần được căn giữa là tuôn ra phía bên trái. Bất kỳ ý tưởng?

Answer 1

text-align:center đến wrapper, hoặc <div align=center> (xấu xí, tôi biết, nhưng công trình)

hoặc với JS:

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

chỉ hoạt động trên IE6 +.

Answer 2

Hãy thử điều này:

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

Hoặc ...

#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

Trừ khi bạn cần div cha mẹ để có một chiều rộng chất lỏng (đó sẽ là một chút ngớ ngẩn khi bạn đang thiết đứa trẻ chiều rộng của div), tại sao không chỉ thiết lập chiều rộng của div cha và thêm margin:0 auto?

Answer 4

Được rồi tôi đã chơi đùa với nó và các công trình này giống hệt nhau trong FF, Opera và 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() 

});