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

Есть неплохой способ вертикально центрировать текст в блоке <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]–->

Пример

Опубликовано: 07.11.2009 Просмотров 38060 Ссылка на оригинал Tweet it!
7 comments  

asd

2011.09.01 11:50

 Пример в ие 7 не работает.
 

basilkot

2011.09.01 12:37

 Ох уж этот IE7...
 

Johnny

2011.09.29 03:35

 Есть 2 типа браузеров нормальные и ие:/
 

Толик

2012.11.22 05:39

 Кода много, толку мало, ещё и костыли делать приходится для ие. Есть вполне кроссбраузерная вёрстка подобных вещей и с меньшим кодом.
 

Бистяра

2012.11.30 10:30

 Да нах этот ие...
 

Александр

2013.06.09 11:15

 Спасибо автору. Идея умна, и отлично работает. Я давно ищу такой же метод для расположения блоков адсенс. Но, так как я не специалист, не смог использовать как мне хотелось бы. Вопрос в чем? На моем сайте статьи отличаются по высоте. Чтобы расположить блоки адсенс так, чтобы они были всегда на первом экране, размер высоты объявления я должен задать сверху. Следую указанию автора, немного меняя формулу не получил ожидаемого результата. То есть результат есть, но мне не устраивает, так как, к примеру " top: 100px;" высота считается с нижнего края моей статьи(таблицы). а мне нужно эту высоту браузер считал сначала статьи (таблицы). Второй вопрос если автор указал формулу так, чтобы она не перекрывала текст(таблицу) (нарушение правила ГУГЛ АДСЕНС), а статью(таблицу) разделил на две части, и притесняла таблицу и открыла себе место, было бы здорово. В знак благодарности-Вам клик
 

basilkot

2013.06.10 02:46

  • сложно так понять, напиши через форму фидбека свою почту и сайт с проблемой, постараюсь помочь

Роман

2013.12.20 17:11

 Спасибо огромное, мне помогло, давно искал.
 

Оставить после себя комментарий

user

2016.11.23

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!