Почему display: table-cell не работает, когда position: absolute

Я столкнулся со странной проблемой. Я использую DIV в качестве контейнера и помещаю изображение в этот DIV. Я хочу, чтобы это изображение было выровнено вертикально вниз. Следующий код работает.

#banner { 
  width: 700px; 
  height: 90px; 
  top: 60px; 
  left: 178px; 
  overflow: hidden; 
  text-align: center; 
  display: table-cell; 
  vertical-align: bottom; 
  position: relative;
}

<div id="banner">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
</div>

Но если я изменю код css «позиция: относительная» на «позиция: абсолютная», изображение больше не может быть выровнено по низу. Это ошибка Firefox3? Как я могу решить эту проблему?

Мое текущее решение:

<div id="banner">
  <table width="100%" height="100%"><tr><td valign="bottom" align="center">
  <img src="http://www.google.de/intl/de_de/images/logo.gif"/>
  </td></tr></table>
</div>

Но мне это решение не нравится.


alignment css position
person stanleyxu2005    schedule 22.10.2009    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Краткий ответ: изменить

top: 60px;

to

bottom: 60px;

Длинный ответ:

Объявление position: absolute выводит ваш элемент из любого места и размещает его относительно самого внутреннего элемента, который не объявлен статическим. Больше не участвует в выравнивании любого другого элемента, следовательно, он больше не служит ячейкой таблицы (объявление не имеет никакого эффекта). Кроме того, такое объявление, как top: 10px, означает размещение его на таком большом расстоянии от вершины содержащего его элемента.

Объявление элемента как position: relative делает объявление, такое как top: 10px, означает «переместить элемент на 10 пикселей сверху от текущей позиции». Элементы, объявленные относительными, могут перекрываться другими элементами, хотя вы должны помнить, что исходное положение по-прежнему определяет расположение других элементов.

Надеюсь, это ответ на ваш вопрос.

person RichN    schedule 22.10.2009
comment
Потому что я хочу, чтобы DIV могли перекрываться. Если DIV имеют относительное положение, они не могут перекрываться, не так ли? - person stanleyxu2005; 23.10.2009

arrow_upward
2
arrow_downward

Вы также можете попробовать установить position:relative; container, который делает баннер (позиция #banner:relative и позиция img:absolute), а затем устанавливает абсолютную позицию в значение bottom:0, выравнивая его по нижней части контейнера. Если это вся страница, просто установите ширину и высоту контейнера на 100% и удалите лишние отступы/поля в теле или в div.

person CodeJoust    schedule 22.10.2009
comment
Спасибо, приятно знать, что дно: 0 может сделать его выровненным по низу. Как выровнять изображение по середине? У меня есть решение сохранить текст посередине: вставьте внутренний DIV и установите его высоту строки: height_of_outer_div. Другое дело, я хочу изменить его во время выполнения. Если я должен написать совершенно другой хитрый код css для трех позиций, это не так уж приятно. - person stanleyxu2005; 23.10.2009
comment
Это на рабочей веб-странице? Чтобы он отображался посередине, просто установите margin:0 auto;, хотя элементу может потребоваться ширина, в зависимости от его элемента-контейнера. Чтобы изображение выровнялось по div... это хитрость. Есть трюк с таблицей css, как вы уже пробовали, и трюк с линией. Вы также можете просто заполнить элемент, если он всегда имеет одинаковую ширину, но обычно это не так. - person CodeJoust; 23.10.2009