Нужна помощь в горизонтальном центрировании абсолютного позиционирования DIV - PullRequest
Новая
       36

Нужна помощь в горизонтальном центрировании абсолютного позиционирования DIV

0 голосов
/ 09 января 2011

Мне нужно центрировать некоторые элементы с абсолютным позиционированием относительно контейнера.После прочтения многочисленных статей, похоже, что структура, подобная следующей, сделает эту работу.Единственная проблема с IE7.Каким-то образом ширина элемента item1 (элемента div) уменьшается до 0 (даже если для него явно указана ширина) в IE7.item2 отлично работает во всех браузерах.Мой вопрос, почему стиль ширины для блочного элемента не учитывается IE7 в этой ситуации?Вы знаете какой-нибудь обходной путь или исправить?

<div style="position: relative; width: 500px; height: 400px; border: thin dotted green;">
    <div style="position: absolute; top: 0px; left: 50%; height: 0px;">
        <div id="item1" style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px; height: 30px;"></div>
    </div>
    <div style="position: absolute; top: 50px; left: 50%; height: 0px;">
        <input id="item2" type="button" value="Button" style="position: relative; display: inline-block; left: -50%;">
    </div>
</div>

Я сделал jsfiddle с кодом выше.Спасибо за ваш вклад.

1 Ответ

1 голос
/ 09 января 2011

Добавьте min-width = 300px; поэтому строка кода выглядит как 

<div style="position: relative; display: inline-block; left: -50%; border: thin dotted green; width: 300px;min-width:300px; height: 30px;"></div>
...