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

Xpoint.ru » База знаний » CSS » Вертикальное выравнивание текста

Постановка задачи

Иногда при вёрстке возникает потребность в вертикальном выравнивании текста в блоке. Обычно этот вопрос решается использованием таблицы, в ячейку которой помещается текст, и для ячейки этой указывается необходимое значение 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 любым приемлемым способом (например, через условные комментарии).

Ссылки

комментарии (нет) | история | ссылающиеся страницы