vertical-align:middle

14 Jul, 2005

Продолжаю традицию обзывать посты экзотическими(для меня) 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.

Вывод

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

Инфо

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

1.Латрек | 14 Jul, 2005
К сожалению, чаще всего известная высота родительского блока или контента, это сферический конь в вакууме
2.akella | 14 Jul, 2005
Тогда нужно поиграться с heigh:100% - метод номер 2 в посте и есть пример - высота окна броузера в точности равняется сферическому коню в вакууме.
3.kost | 15 Jul, 2005
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
4.akella | 15 Jul, 2005
Спасибо! Жаль тока что тут надо знать высоту центрируемого блока - но зато без хаков.
5.cssing :: Архив :: cssing 2005 | 27 Dec, 2005
[...] table - использование малоизвестного CSS свойства для решения частой проблемы с floatами. vertical-align:middle - вертикальное центрирование с помощью CSS - обзор техник. pravda.c [...]
6.Suslik | 19 Jan, 2006
Privet Pupsiki !!!
7.akella | 19 Jan, 2006
Suslik? ты уверена что по адресу?
8.cssing :: Архив :: Графики | 07 Mar, 2006
[...] инаковой height и line-height - одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=&quot [...]
9.cssing :: Архив :: Графики | 07 Mar, 2006
[...] инаковой height и line-height - одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=&quot [...]
10.dV | 14 Feb, 2007
Объясните же мне смысл вертикального позиционирования блоками!?
11.akella | 15 Feb, 2007
Мне кажется с таким подходом никто вам ничего обьяснять не будет - и так уже противники нормальнй верстки привыкли что мы с пеной у рта им что то рассказываем. Пора уже самим понять что хорошо верстать лучше. )
12.Николай | 20 Jan, 2010
Ваш пример (http://cssing.org.ua/examples/valign/index1.html) не работает в IE7 (ie tester). Кажется что условные комментарии в оригинальной статье (http://www.brunildo.org/test/vertmiddle.html) там были для этого.
13.Перспективный блоггер | 26 Sep, 2009
Отличная статья. Очень полная. Хотя в принципе не хватает 1 варианта с хаком для ИЕ через кондишнл комментс. Когда для всех брарузеров делается это через тейбл-селл, а для ИЕ в кондишнл комментсах делается настоящая таблица. В итоге получаем везде дивную, а в ИЕ табличную верстки. )
14.1 | 11 Sep, 2009
браузер пишется через А а ААА ааа - запомнил?
15.akella | 11 Sep, 2009
Спасибо Кэп! Я вернусь в 2005й год на своей машине времени и всем об этом расскажу ;)
16.Developer | 15 Jun, 2007
Может я что-то неправильно понял, но CSS стиль div.middle { display: table-cell; vertical-align: middle; }, нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?... Зато только в "глюкавом" и насквозь "прогнившем" IE 7 мне удалось отобразить модель сайта полностью удовлетворяющую заданному эскизу, чего кстати нельзя сказать об остальных броузерах.
17.akella | 16 Jun, 2007
Странно вот тут я сделал пример этой техники http://cssing.org.ua/examples/valign/ и в моих 8-9 операх все работает. Может быть что то другое в верстке не так?
18.Alinaki | 03 Nov, 2007
Центрированный по вертикали (третьим способом), блок ни в какую не хочет центрироваться по горизонтали в нормальных браузерах... знает кто, как решить?
19.akella | 03 Nov, 2007
Третий способ очень сложный в этом смысле, может быть стоит попробовать новый вариант вертикального выравнивания - он менее зависим от этих параметров
20.Tutta | 07 Dec, 2007
Цитата: "нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?…" Стиль {display: table-cell; vertical-align: middle;} действительно не работает не только в этих браузерах , но и в FireFox 1.5 и.т.д. Причина - ни автор, ни др. уважаемые посетители не пожелали упомянуть, что для эмуляции блоком свойств табличной ячейки необходим контейнерный блок со свойствами таблицы. Т.е. со свойством {display: table;}
21.Tutta Karlsson | 07 Dec, 2007
В догонку. Контейнерный блок не обязателен, если документ есть не чистый HTML, а Ежели документ будет , то без контейнерного блока не обойтись.
22.akella | 07 Dec, 2007
Так и есть, спасибо за замечание, к сожалению обьять необьятное нельзя. Я всегда использую XHTML доктайпы и потому сия проблема меня обходила.
23.SelenIT | 16 Dec, 2007
> Контейнерный блок не обязателен, если документ есть не чистый HTML, а Tutta Karlsson, можно где-нибудь увидеть пример, где работа display: table-cell; зависит от доктайпа? Я, как ни бился, воспроизвести так и не смог...
24.cssing :: Архив :: Еще один способ вертикального выравнивания в CSS | 19 Apr, 2008
[...] копий сломано на ниве вертикального выравнивания без таблиц. Однако [...]
25.Роман | 10 May, 2009
Как-то нужно было поместить кнопочку фиксированной высоты (с абсолютным позиционированием) в центр блока неизвестной высоты, сделал так: .block {position: relative;} .button {position: absolute; height: 50px; top: 50%; margin-top: -25px;} Как видно, указываем top: 50%, для того, чтобы вершина кнопки была посередине, а чтобы сама кнопка была посередине, поднимаем её на половину высоты кнопки (50px/2 = 25px). Таким образом кнопка будет по центру (middle) при любой высоте блока.
26.Вёрстка в IntelliJIDEA. Часть №2 : Makishvili.com | 07 Apr, 2009
[...] за идею и Витале Харисову за то, что её раскопал в архивах cssing.org.ua и добавил в код элегантности [...]
27.Евгений | 22 Jul, 2008
когда же сделают чтоб все просто было? бесит браузеры эти!!!
28.Markus | 06 Dec, 2008
Но display: table-cell; не работает применительно к спискам UL. Например необходимо в LI вертикально отцентрировать однострочный или многострочный элемент a (ссылу). У LI фиксированная высота. Если указывать display: table-cell; то список раскладывается как таблица.
29.akella | 06 Dec, 2008
Мне повезло и мне всегда этот список в таком виде и нужен был. =) Но можно же добавить еще одну обертку внутрь li, и для li задать table. Или выйти из ситуации через 3 спана, и абсолютное позиционирование. Зависит от дизайна.
30.Slaffko | 22 May, 2010
Интересно что свойства display: table-cell; vertical-align: middle; не работаю вместе со свойством position:absolute;
31.Levik | 27 Aug, 2010
про машину времени понравилось :)))) DEM84, в современных браузерах работает display:table-cell ;)
32.Levik | 27 Aug, 2010
Slaffko, еще они не работают вместе с float:right|left ... Без вложенного контейнера не обойтись..
33.Наташа | 29 Sep, 2011
Спасибо, помогло
34.Ярослав | 15 Sep, 2012
Сейчас, к сожалению, IE работает лучше чем такой пи**рский отстой, как хром. Levik, не работает display:table-cell в Chrome и ему подобном говне.
35.Oleg | 07 Sep, 2011
Большое спасибо за хаки
36.Андрей | 03 Jan, 2012
Нашёл более простую версию: http://divhack.com/node/26
37.Михаил | 15 Dec, 2012
Может быть, я очевидную вещь напишу, но для меня это оказалось новым - пытался сделать display: table-cell, vertical-align: middle, но оно не работало.. оказалось, что у родительского блока был float: left и из-за этого выравнивание не работало.. точнее, видимо, игнорировалось display: table-cell.. добавил в плавающий блок обёртку и уже внутри неё сделал центрирование - и всё заработало! но почему так?
38.Charlesjak | 30 Jan, 2021
Свидетельство возможно приобрести равно как в раздельную большую партию, таким образом также в массовое изготовление. Завершающий вид подразумевает оценку производственного хода, компании со дальнейшими проверками инспекторами. Присутствие сертификата предполагает значительное свойство промышляемого песка также соотношение со общепризнанными куплю песок овражный мерками производственного хода. Данные условия довольно значимы, таким образом равно как с свойства песка находится в зависимости свойство предстоящих строй использованных материалов также сооружений с их. Нелегальная добывание Присутствие противозаконной добыче песка отсутствует лицензии также сертификата, доказывающие его свойство. В торге строй использованных материалов некто способен обладать цена далее, нежели около правомерно доставаемых компаний.