Вертикальное выравнивание текста
Оглавление
Постановка задачи
Иногда при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Обычно этот вопрос решается использованием таблицы, в ячейку которой помещается текст, и для ячейки этой указывается необходимое значение CSS-свойства vertical-align
.
Но возникает резонный вопрос, нельзя ли обойтись без таблицы, без перегрузки разметки страницы лишними тегами? Ответ: «можно», но из-за плохой поддержки CSS браузером MSIE решение задачи для него будет отличаться от решения для остальных распространённых браузеров.
В качестве примера рассмотрим следующий фрагмент:
<style type="text/css"> div { border: 1px solid #000; height: 10em; width: 10em; } </style> <div> <span>Some text</span> </div>
и попытаемся вертикально выровнять текст по центру блока и по нижнему краю блока.
Решение задачи
«Правильные» браузеры (включая MSIE 8)
Большинство современных браузеров поддерживают CSS2.1, а именно значение table-cell
для свойства display
. Это даёт нам возможность заставить блок с текстом отображаться как ячейка таблицы и, воспользовавшись этим, выровнять текст по вертикали:
div { display: table-cell; vertical-align: middle; }
или
div { display: table-cell; vertical-align: bottom; }
Internet Explorer (до 7-й версии включительно)
Решить задачу выравнивания текста по нижнему краю блока в MSIE можно с помощью абсолютного позиционирования (тут нам пригодится строковой элемент вложенный в блок):
div { position: relative; } div span { display: block; position: absolute; bottom: 0%; left: 0%; width: 100%; }
Этот набор правил работает и в «правильных» браузерах.
Указывать свойства
div span { display: block; width: 100%; }
не обязательно, но они могут понадобиться, если помимо вертикального выравнивания текста планируется использовать также горизонтальное, например, text-align: center;
.
Для вертикального выравнивания текста по центру блока исходный фрагмент придётся всё же усложнить — введём ещё один строковый элемент:
<div> <span><span>Some text</span></span> </div>
Тогда искомый набор правил будет иметь следующий вид:
div { position: relative; } div span { display: block; position: absolute; top: 50%; left: 0%; width: 100%; } div span span { position: relative; top: -50%; }
Смысл этого решения в том, что внутренний элемент позиционируется по вертикали абсолютно на половине высоты блока, а затем смещается вверх на половину собственной высоты. Используется неправильная интерпретация высоты в MSIE.
Существует другой способ решения этой задачи для MSIE — использование expression
. Недостаток этого подхода — выравнивание не будет работать при отключенном JavaScript, зато он позволяет обойтись меньшим количеством элементов-«оберток» (в идеальном случае вообще без них).
Заключение
Для практического использования остаётся только объединить решения для «правильных» браузеров и MSIE любым приемлемым способом (например, через условные комментарии).