vertical-align:middle

14 July, 2005

XHTML/CSS, Полезности

Продолжаю традицию обзывать посты экзотическими(для меня) CSS свойствами. Описываю свои трудности с реализацией вертикального выравнивания по центру.

Update: рекомендую так же ознакомиться с новым методом вертикального выравнивания

Одна строка текста – просто

Для того что бы выровнять одну строку например такого кода:

  1. <p>
  2. Rovno odna stroka texta
  3. </p>

Нужен такой CSS:

  1. p {
  2. line-height:30px;
  3. height:30px;
  4. }

Тогда эта строка текста по вертикали будет как раз посередине p. Можно посмотреть рабочий пример по адресу ukr.net (в самом низу, в серой области)

Несколько строк или просто блочный элемент

Тут все гораздо сложнее. Для начала сформулирую проблему:

  1. У нас есть div(или любой блочный элемент) с известной высотой
  2. Какой-нить абзац текста P внутри этого DIVa – известно лишь что он(текст) точно поместится в заданную высоту DIVa
  3. Нужно отцентрировать этот текст по вертикали без использования таблиц

Вот такая непростая задачка.
Пускай HTML код такой:

  1. <div>
  2. <p>
  3. Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations….
  4. </p>
  5. </div>

Для нормальных броузеров

Для всех броузеров кроме winIE и macIE работает такой CSS код:

  1. div {
  2. display: table-cell;
  3. vertical-align: middle;
  4. }

Можно посмотреть мой пример здесь – но помните работает только в “нормальных” броузерах (не ИЕ).

для IE

А вот тут начинаются извраты…
Изврат Метод n1:
Стили прямо в коде – внизу ссылка на оригинал с разделением CSS и HTML

  1. <div style=”display: table; height: 400px; _position: relative; overflow: hidden;”>
  2. <div style=” _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;”>
  3. <p style=” _position: relative; _top: -50%”>
  4. any text<br />
  5. any height<br />
  6. any content, for example generated from DB<br />
  7. everything is vertically centered
  8. </p>
  9. </div>
  10. </div>

(взято отсюда) Метод не самый удачный имхо…

Метод n2: Тоже не без извращений смотрим на центрирование во всем окне – http://www.kriton.de/CSS/zentrieren/alle-zentriert.html (видели ID на немецком? – посмотрите! :))
Тот сайт пока умер – смотрим и читаем тут – http://www.umade.ru/log/2004/10/46.html.
(не совсем отвечает постановке задачи, но очень распространенная проблема)

Метод n3(ИМХО самый удачный и универсальный из тех что я знаю):
Метод однако требует добавления в код пустого DIV или другого элемента.
Итак центрируем #valign-center:

  1. <div class=”wrap”>
  2. <div class=”valign-center”>
  3. <p>lenzi, e profondissima quiete</p>
  4. <p>infinito silenzio a questa voce vo comparando: </p>
  5. </div>
  6. <div class=”just-for-IE”></div>
  7. </div>

И теперь центрируем для всех нормальных через display: table-cell;vertical-align: middle;, а для ИЕ используем извраты с height:100%; и display: inline-block:

  1. .wrap {
  2. display: table-cell;
  3. vertical-align: middle;
  4. width: 100%;
  5. height: 401px;
  6. }
  7. .just-for-IE {
  8. display: none;
  9. width: 1px;
  10. margin-left: -1px;
  11. }
  12. * html .just-for-IE, * html .valign-center {
  13. display: inline-block;
  14. vertical-align: middle;
  15. }
  16. * html .valign-center {
  17. width: 100%;
  18. }
  19. * html .just-for-IE {
  20. height: 100%;
  21. }
  22. * html .just-for-IE, * html .valign-center {
  23. display: inline;
  24. }

Вот такой, мягко говоря немаленький, CSS и то ужатый(не считаю нужным поддерживать IE5Mac). Полную и рабочую версию можно посмотреть здесь

n4:способ с помощью expression, смотрите в новом посте Еще один способ вертикального выравнивания в CSS.

Вывод

Если очень хочется(выровнять по центру), то можно. И даже будет работать – главно в хаках потом не запутаться…
Пока писал, думал – сча пару изящных хаков в две строки – нифига…. :(
Ну зато хоть есть откуда передирать теперь.

Инфо

XHTML/CSS, Полезности

37 комментариев к “vertical-align:middle”

Латрек | 1. 14 July, 2005

К сожалению, чаще всего известная высота родительского блока или контента, это сферический конь в вакууме

akella | 2. 14 July, 2005

Тогда нужно поиграться с heigh:100% – метод номер 2 в посте и есть пример – высота окна броузера в точности равняется сферическому коню в вакууме.

kost | 3. 15 July, 2005

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

akella | 4. 15 July, 2005

Спасибо!
Жаль тока что тут надо знать высоту центрируемого блока – но зато без хаков.

cssing :: Архив :: cssing 2005 | 5. 27 December, 2005

[…] table – использование малоизвестного CSS свойства для решения частой проблемы с floatами. vertical-align:middle – вертикальное центрирование с помощью CSS – обзор техник. pravda.c […]

Suslik | 6. 19 January, 2006

Privet Pupsiki !!!

akella | 7. 19 January, 2006

Suslik? ты уверена что по адресу?

cssing :: Архив :: Графики | 8. 7 March, 2006

[…] инаковой height и line-height – одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=&quot […]

cssing :: Архив :: Графики | 9. 7 March, 2006

[…] инаковой height и line-height – одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=&quot […]

dV | 10. 14 February, 2007

Объясните же мне смысл вертикального позиционирования блоками!?

akella | 11. 15 February, 2007

Мне кажется с таким подходом никто вам ничего обьяснять не будет – и так уже противники нормальнй верстки привыкли что мы с пеной у рта им что то рассказываем. Пора уже самим понять что хорошо верстать лучше. )

Developer | 12. 15 June, 2007

Может я что-то неправильно понял, но CSS стиль div.middle { display: table-cell; vertical-align: middle; }, нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?… Зато только в “глюкавом” и насквозь “прогнившем” IE 7 мне удалось отобразить модель сайта полностью удовлетворяющую заданному эскизу, чего кстати нельзя сказать об остальных броузерах.

akella | 13. 16 June, 2007

Странно вот тут я сделал пример этой техники
http://cssing.org.ua/examples/valign/
и в моих 8-9 операх все работает. Может быть что то другое в верстке не так?

Alinaki | 14. 3 November, 2007

Центрированный по вертикали (третьим способом), блок ни в какую не хочет центрироваться по горизонтали в нормальных браузерах… знает кто, как решить?

akella | 15. 3 November, 2007

Третий способ очень сложный в этом смысле, может быть стоит попробовать новый вариант вертикального выравнивания – он менее зависим от этих параметров

Tutta | 16. 7 December, 2007

Цитата:
“нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?…”

Стиль {display: table-cell; vertical-align: middle;} действительно не работает не только в этих браузерах , но и в FireFox 1.5 и.т.д.
Причина – ни автор, ни др. уважаемые посетители не пожелали упомянуть, что для эмуляции блоком свойств табличной ячейки необходим контейнерный блок со свойствами таблицы. Т.е. со свойством {display: table;}

Tutta Karlsson | 17. 7 December, 2007

В догонку.
Контейнерный блок не обязателен, если документ есть не чистый HTML, а

Ежели документ будет , то без контейнерного блока не обойтись.

akella | 18. 7 December, 2007

Так и есть, спасибо за замечание, к сожалению обьять необьятное нельзя. Я всегда использую XHTML доктайпы и потому сия проблема меня обходила.

SelenIT | 19. 16 December, 2007

> Контейнерный блок не обязателен, если документ есть не чистый HTML, а
Tutta Karlsson, можно где-нибудь увидеть пример, где работа display: table-cell; зависит от доктайпа? Я, как ни бился, воспроизвести так и не смог…

cssing :: Архив :: Еще один способ вертикального выравнивания в CSS | 20. 19 April, 2008

[…] копий сломано на ниве вертикального выравнивания без таблиц. Однако […]

Евгений | 21. 22 July, 2008

когда же сделают чтоб все просто было? бесит браузеры эти!!!

Markus | 22. 6 December, 2008

Но display: table-cell; не работает применительно к спискам UL. Например необходимо в LI вертикально отцентрировать однострочный или многострочный элемент a (ссылу). У LI фиксированная высота. Если указывать display: table-cell; то список раскладывается как таблица.

akella | 23. 6 December, 2008

Мне повезло и мне всегда этот список в таком виде и нужен был. =)
Но можно же добавить еще одну обертку внутрь li, и для li задать table.
Или выйти из ситуации через 3 спана, и абсолютное позиционирование. Зависит от дизайна.

Вёрстка в IntelliJIDEA. Часть №2 : Makishvili.com | 24. 7 April, 2009

[…] за идею и Витале Харисову за то, что её раскопал в архивах cssing.org.ua и добавил в код элегантности […]

Роман | 25. 10 May, 2009

Как-то нужно было поместить кнопочку фиксированной высоты (с абсолютным позиционированием) в центр блока неизвестной высоты, сделал так:
.block {position: relative;}
.button {position: absolute; height: 50px; top: 50%; margin-top: -25px;}
Как видно, указываем top: 50%, для того, чтобы вершина кнопки была посередине, а чтобы сама кнопка была посередине, поднимаем её на половину высоты кнопки (50px/2 = 25px). Таким образом кнопка будет по центру (middle) при любой высоте блока.

1 | 26. 11 September, 2009

браузер пишется через А а ААА ааа – запомнил?

akella | 27. 11 September, 2009

Спасибо Кэп! Я вернусь в 2005й год на своей машине времени и всем об этом расскажу ;)

Перспективный блоггер | 28. 26 September, 2009

Отличная статья. Очень полная. Хотя в принципе не хватает 1 варианта с хаком для ИЕ через кондишнл комментс. Когда для всех брарузеров делается это через тейбл-селл, а для ИЕ в кондишнл комментсах делается настоящая таблица. В итоге получаем везде дивную, а в ИЕ табличную верстки. )

Николай | 29. 20 January, 2010

Ваш пример (http://cssing.org.ua/examples/valign/index1.html) не работает в IE7 (ie tester).

Кажется что условные комментарии в оригинальной статье (http://www.brunildo.org/test/vertmiddle.html) там были для этого.

Slaffko | 30. 22 May, 2010

Интересно что свойства display: table-cell; vertical-align: middle; не работаю вместе со свойством position:absolute;

Levik | 31. 27 August, 2010

про машину времени понравилось :))))
DEM84, в современных браузерах работает display:table-cell ;)

Levik | 32. 27 August, 2010

Slaffko, еще они не работают вместе с float:right|left … Без вложенного контейнера не обойтись..

Oleg | 33. 7 September, 2011

Большое спасибо за хаки

Наташа | 34. 29 September, 2011

Спасибо, помогло

Андрей | 35. 3 January, 2012

Нашёл более простую версию:
http://divhack.com/node/26

Ярослав | 36. 15 September, 2012

Сейчас, к сожалению, IE работает лучше чем такой пи**рский отстой, как хром. Levik, не работает display:table-cell в Chrome и ему подобном говне.

Михаил | 37. 15 December, 2012

Может быть, я очевидную вещь напишу, но для меня это оказалось новым – пытался сделать display: table-cell, vertical-align: middle, но оно не работало.. оказалось, что у родительского блока был float: left и из-за этого выравнивание не работало.. точнее, видимо, игнорировалось display: table-cell.. добавил в плавающий блок обёртку и уже внутри неё сделал центрирование – и всё заработало!
но почему так?

Оставить комментарий