Специально для тех, кто любит заниматься сексом в гамаке и стоя: нашел ЕЩЕ БОЛЕЕ ДОЛГИЙ И ТРУДНЫЙ СПОСОБ. Зато - в духе ХХI века, все по взрослому, никаких таблиц.
Необходимость вертикального выравнивания текста (к примеру, центрирования) относительно блочного контейнера возникает достаточно редко. Как правило, подобное поведение требуется в таблицах, и собственно для таблиц существует простой универсальный инструмент – CSS-свойство vertical-align. C произвольным же блочным элементом дела обстоят немного хуже. Существует несколько путей решения проблемы (сторонники «валидной» верстки, уверен, хорошо знакомы с ними), я же решил предложить не худший и не лучший, а просто еще один вариант.
Задача: Дан блочный элемент, к примеру div
с классом valign
, содержащий некоторый текст.
Код:
<div class="valign">
... некий текст ...
</div> Необходимо выровнять текст по вертикали, к примеру, отцентрировать, относительно родителя. Для «продвинутых» веб-обозревателей существует простое решение:
.valign{
display:table-cell;
vertical-align:middle;
}
Данный способ к браузеру от Microsoft, к сожалению, не применим, так как он поддерживает vertical-align только для табличных элементов, однако IE версии 6 и старше успешно применяет данное свойство и для inline-элементов, значит можно попытаться найти особый путь и для этого веб-проводника.
В общем виде идея выглядит так. Дополним HTML-код: обернем текст, к примеру, тегом p, а также добавим на том же уровне пустой inline-элемент (к примеру span).
Код:
<div class="valign">
<span></span>
<p>... некий текст ...</p>
</div> Тогда вертикально выровнить текст внутри контейнера с классом valign можно следующим образом (только для IE):
.valign{
height:300px; /* определенное значение высоты */
line-height:300px;
}
.valign p{
vertical-align:middle; /* здесь выравниваем текст по вертикали */
display:inline;
line-height:normal;
}
.valign *{
zoom:1; /* Важно! Устанавливаем hasLayout = true */
}
Ключевыми моментами приведенной техники являются:
- задание значения свойству line-height главного контейнера аналогичного значению его высоты;
- добавленные нами дополнительные элементы должны быть встроенными (inline) и иметь «включенным» Microsoft'овский hasLayout (делаем при помощи zoom:1
.
Приведенный способ вертикального выравнивания текста вполне самодостаточный и может с успехом применятся на практике. Необходимо лишь дополнить CSS-код, сделав его более универсальным.
Код:
.valign{
height:300px;
*line-height:300px; /* для IE */
}
.valign, .valign p{
display:table-cell;
vertical-align:middle; /* здесь выравниваем текст по вертикали */
}
/* для IE */
.valign p{
*display:inline;
line-height:normal;
}
/* для IE */
.valign *{
zoom:1; /* Важно! Устанавливаем hasLayout = true */
}
Однако, вернемся к нашей задаче. Итак, мы имеем простое решение для браузеров с поддержкой display:table-cell; и вариант с дополнительными элементами для Internet Explorer версии 6 и выше. Так как эти дополнительные элементы мы можем добавить при помощи expression(), то указанный вариант успешно применим и для нашего случая.
Окончательно приходим к следующему решению:
Код:
.valign{
...
display:table-cell; /* для не IE */
line-height: expression(this.offsetHeight + "px"); /* для IE */
behavior: expression(!this.extra ? this.extra = this.innerHTML = '<span></span><p>' + this.innerHTML + '</p>' : ''); /* для IE */
}
.valign, .valign p{
vertical-align:middle; /* здесь выравниваем текст по вертикали */
}
/* для IE */
.valign p{
line-height:normal;
display:inline;
}
/* для IE */
.valign *{
zoom:1; /* Важно! Устанавливаем hasLayout = true */
}