css-html.org

По материалам 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 подходит только для идентификаторов.