Вертикальное выравнивание текста

Необходимость вертикального выравнивания текста (к примеру, центрирования) относительно блочного контейнера возникает достаточно редко. Как правило, подобное поведение требуется в таблицах, и собственно для таблиц существует простой универсальный инструмент – 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 */
}

Ключевыми моментами приведенной техники являются:

1. задание значения свойству line-height главного контейнера аналогичного значению его высоты;
2. добавленные нами дополнительные элементы должны быть встроенными (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)