Вертикальное выравнивание текста
- Internet Explorer 7, что изменилось в поведении браузера?
(18722) - CSS-фильтр для Gecko
(13986) - Текст с переливом
(6255) - Вертикальное выравнивание текста
(0 / 6) - CSV на веб-страницах
(0 / 1) - Таблицы с вертикальным направлением текста
(0 / 9) - «Полосатые таблицы» средствами CSS
(0 / 7) - Всплывающие подсказки в духе AJAX
(0 / 9) - Табличная верстка блоками
(0 / 12) - Закругляем уголки границ у блоков
(0 / 1)
Необходимость вертикального выравнивания текста (к примеру, центрирования) относительно блочного контейнера возникает достаточно редко. Как правило, подобное поведение требуется в таблицах, и собственно для таблиц существует простой универсальный инструмент – 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 */
}
Как это работает можно увидеть здесь.
Оставить отзыв | Комментарии (6)