Вертикальное выравнивание в div’ах

Автор: Cake_Seller

По материалам cssing.org.ua.

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

Итак, перейду непосредственно к описанию метода.

Для вертикального выравнивания в блоках разработчики W3C создали замечательное свойство display: table-cell;, которое позволяет заставить какой-либо элемент отображаться как ячейка таблицы. При этом добавив vertical-align: middle; мы прекрасно справились бы с поставленной задачей, если бы не Internet Explorer, который ни в какую не хочет поддерживать свойство display: table-cell;. Ниже приведен образец кода, который поможет IE отображать содержимое блока по середине, также как в остальных браузерах:

Образец кода

HTML:

<div class="container">
  <p class="middled">Вертикально отцентрированный элемент</p>
</div>

CSS:

.container {
  display: table-cell;
  vertical-align: middle;
}
.middled {
  margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
}

Для укрощения IE мы воспользовались expression‘ом. Expression выполняет следующие функции: он вычисляет высоту родительского и дочернего элементов, затем их разность делит пополам, а полученное в результате этого число мы используем в качестве значения верхнего отступа для дочернего элемента. Expression лучше убрать в отдельный css файл используя условные комментарии.

Отличаем этого метода от того, который описан в статье на cssing.org.ua заключается в том, что его можно использовать для классов, в то время как метод с cssing.org.ua подходит только для идентификаторов.

Отзывов (13) на «Вертикальное выравнивание в div’ах»

  1. [...] Был предложен также метод для классов: margin-top: expression((parentNode.offsetHeight – this.offsetHeight) [...]

  2. ПаЛыЧ в 03.06.2008 at 15:05

    Но этот метод не работает в ИЕ6. И не самый лучший метод решения

  3. Cake_Seller в 03.06.2008 at 17:17

    2 ПаЛыЧ
    Вы ошибаетесь, этот метод работает в ИЕ6. От такого приёма по сути не было бы толку если бы он не работал в IE6.

  4. Cake_Seller в 03.06.2008 at 17:27

    2 ПаЛыЧ
    Вот пример.

  5. ПаЛыЧ в 12.06.2008 at 15:19

    Забираю свои слова назад

  6. Я в 20.06.2008 at 20:07

    А не подскажете, как выровнять по нижнему краю?

  7. Я в 20.06.2008 at 20:11

    Отбой. Догадалась сама.

  8. Alex в 29.10.2008 at 01:20

    Фича не сработала при position: absolute у div.container

  9. Alex в 29.10.2008 at 01:34

    Извиняюсь нужно было в позиционируемый воткнуть див с контейнером
    [div позиционируемый [div контейнер [p ...]]]

  10. Женя в 27.11.2009 at 07:17

    Охереть… Какой же гемор!!!…
    Буду продолжать практиковать php и mysql, а вёрсткой пусть лучше мазахисты занимаются.

  11. jakov в 14.12.2009 at 20:56

    Все таки в IE6 есть проблемы… они у меня возникают в том случае, когда слой находится чуть-чуть за пределами экрана… IE просто умирает.

  12. Максим Кузьмичев в 26.12.2009 at 06:12

    Скажите, а можно ли взять статьи с вашего блога? Со ссылкой на первоисточник конечно же. :)

  13. Cake_Seller в 14.01.2010 at 13:06

    Да, можно.

Оставьте свой комментарий