Как центрировать абсолютно позиционированный div в IE7?

Question

ОБНОВЛЕНО, ПРЕДОСТАВЛЯЮЩИЙ КОНТЕКСТ ДЛЯ РАЗМЕЩЕНИЯ

У меня есть относительно простая структура моей страницы.Страница состоит из двух элементов div, оба абсолютно позиционированы.Один центрируется внутри другого.

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

, который имеет соответствующий CSS:

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

}

Ожидаемое поведение видно на изображении выше.Такое поведение присутствует в IE8, Firefox и Chrome.Тем не менее, в IE7 div, который должен быть центрирован, находится на одном уровне с левой стороной.Есть идеи?

Answer 1

Попробуйте это:

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

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

});

Answer 3

Хорошо, я поиграл с этим, и это работает идентично в FF, Opera и 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 4

Если вам не нужно, чтобы родительский div имел плавную ширину (что было бы немного глупо, когда вы устанавливаете ширину дочернего div), почему бы просто не установить ширину родительского div и добавить margin:0 auto?

Answer 5

text-align:center на обертку или <div align=center> (некрасиво, я знаю, но работает)

или с JS:

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

работает только на IE6 +.