Заметки веб-работника
30 января 2008

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

Популярные записи:
Пара ссылок на некоторые интернет-ресурсы:
Взять детские электронные весы напрокат на prokat-mirdetstva.by Вертикальное выравнивание текста 10 Best dating sites (2017) Our experts tested every major online dating site, ranking each
Статья с коллекции веб-технологических наблюдений.

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

Как это работает можно увидеть здесь.


Теги: CSS

Комментарии

1
astrofillit (Вс, 28 Сен 2008 15:06:05 +0300)
 

пасиба, пригодилось!

2
Ирина (Вс, 30 Ноя 2008 11:45:46 +0200)
 

Кое-что стало понятно, но у меня пока не работает...наверное я не туда вставляю теги. Пытаюсь  меню выровнять по правой стороне.
В /* General Style */  или  в /* Main Menu */  вставлять?
заранее спасибо

3
Запорожец (Пн, 21 Сен 2009 23:51:35 +0300)
 

Спасибо очень пригодилось

4
developer (Чт, 9 Сен 2010 19:40:46 +0300)
 

большое спасибо автору!

5
Ishma (Сб, 28 Сен 2013 1:04:33 +0300)
 

Спасибо за подсказки!
В современных браузерах прекрасно работает самое первое решение.

6
илья (Ср, 16 Июл 2014 7:57:08 +0300)
 

Метод жутко стар и отвратителен!

_______

Вы можете оставить свой отзыв по данной статье:

  Имя
  E-mail (не публикуется)
  Веб-сайт

Комментарий (Теги форматирования не поддерживаются)