вертикальное и горизонтальное выравнивание

Суббота, 08 Марта 2008 г. 09:56 + в цитатник

средства, зависимые от размера элементов

#1. Два div, в обих указывается одинаковая, необходимая, высота блока, отступ второго рассчитывается по формуле: высота блока/2 -минус высота элемента/2

<div style='height:100px;width:100%;text-align:center;vertical-align:middle;'> <div style='height:100px;width:100%;padding-top:41px;'> content </div></div>

#2. Три div, в первом указывается необходимая высота блока, в третьем рассчитывается и подставляется отрицательный отступ по формуле: высота элемента/2

<div style='height:100px;width:100%;text-align:center;vertical-align:middle;'> <div style='height:50%;></div> <div style='margin-top:-9px;'> content </div></div>

средства, не требующие подстановок

#I. table. указывается только высота таблицы (для всей страницы достаточно указать height:100%)

<table style='height:100px;width:100%;'> <tr> <td style='text-align:center;vertical-align:middle;'> content </td></tr></table>

#II. Три div. достаточно указать только высоту блока в первом div.

<div style='height:100px;width:100%;display:table;#position:relative;overflow:hidden;'> <div style='#position:absolute;#top:50%;display:table-cell;vertical-align:middle;'> <div style='#position:relative;#top:-50%;text-align:center;'> content </div></div></div>

* из-за запрета position:absolute на лиру пример#II показывается неадекватно. адекватная версия поста тут

жирным шрифтом выделены изменяемые значения, курсивом - выравниваемый элемент
протестировано и работает в среде:
Mozilla IE NN <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>