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

Есть неплохой способ вертикально центрировать текст в блоке <div> с помощью CSS. Необходимо установить высоту строки текста (line-height этого текста) равной высоте блока (его height). Смотрится неплохо, но главным недостатком является то, что текст необходимо обертывать.

Классическим примером текста состоящего из нескольких строк и центрированного по вертикали и горизонтали - "пузыри" со словами персонажей. Это можно осуществить с помощью CSS, используя CSS tables. Вот что получается:

Возьмём самый простой HTML. "Area" - это регион, в котором мы хотим центрировать текст. Установим для него свойство position в relative. Это позволит абсолютно позиционировать текст внутри "пузыря".

<div class="area"> <div class="bubble"> <p>Чтобы текст выглядел лучше, надо чтобы он был центрирован.</p> </div> </div>

Для региона "bubble" установим свойство display равное table, что само по себе ничего не значит, но затем мы можем задать внутреннему элементу <p> свойство display равное table-cell, что позволит нам вертикально выравнить текст в нём.

.area { width: 300px; height: 300px; background: url(abe-bg.png) no-repeat; position: relative; } .bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; display: table; } .bubble p { display: table-cell; vertical-align: middle; text-align: center; }

Красиво, не правда ли?

А как обстоят дела с IE <=7 ?!

IE 8 поддерживает CSS-таблицы, поэтому он корректно отобразит страницу, а вот предыдущие версии нет. В резульате мы получим следующее:

Однако есть несколько решений.

Одно из решений - обернуть тег <p> в еще один <div> и вставить следующий код:

<!--[if lt IE 8]> <style> .bubble { position: absolute; left: 93px; top: 21px; width: 135px; height: 84px; text-align: center; } .bubble p { position: relative; font-size: 11px; margin-top: expression(this.offsetHeight > this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0"); } </style> <![endif]-->

Следующий способ позволяет избежать утечку памяти (вычисляется только один раз)

.bubble p { position: relative; font-size: 11px; margin-top: inherit; *clear: expression(style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"), style.clear = "none", 0); }

И ещё один способ, использующий несколько другую технику для IE. Требует дополнительный <div>, но позволяет не использовать выражения.

<!--[if lt IE 8]> <style> .bubble div { position: absolute; top:50%; } .bubble div p { position: relative; top: -50% } </style> <![endif]–->

Пример