По мотивам cssing.org.ua.
Для вертикального выравнивания в блоках разработчики W3C создали замечательное свойство display: table-cell;, которое позволяет заставить какой-либо элемент отображаться как ячейка таблицы. При этом добавив vertical-align: middle; мы прекрасно справились бы с поставленной задачей, если бы не Internet Explorer, который ни в какую не хочет поддерживать свойство display: table-cell;.
Ниже приведен образец кода, который поможет IE отображать содержимое блока по середине, также как в остальных браузерах:
HTML:
CSS:
Для укрощения IE мы воспользовались expression'ом. Expression выполняет следующие функции: он вычисляет высоту родительского и дочернего элементов, затем их разность делит пополам, а полученное в результате этого число мы используем в качестве значения верхнего отступа для дочернего элемента. Expression лучше убрать в отдельный css файл используя условные комментарии.
Отличием этого метода от того, который описан в статье на cssing.org.ua заключается в том, что его можно использовать для классов, в то время как метод с 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 подходит только для идентификаторов.
Надеюсь кому-то это пригодиться.
