vertical-align:middle
14 Июля, 2005Продолжаю традицию обзывать посты экзотическими(для меня) CSS свойствами. Описываю свои трудности с реализацией вертикального выравнивания по центру.
Update: рекомендую так же ознакомиться с новым методом вертикального выравнивания
Одна строка текста – просто
Для того что бы выровнять одну строку например такого кода:
- <p>
- Rovno odna stroka texta
- </p>
Нужен такой CSS:
- p {
- line-height:30px;
- height:30px;
- }
Тогда эта строка текста по вертикали будет как раз посередине p. Можно посмотреть рабочий пример по адресу ukr.net (в самом низу, в серой области)
Несколько строк или просто блочный элемент
Тут все гораздо сложнее. Для начала сформулирую проблему:
- У нас есть div(или любой блочный элемент) с известной высотой
- Какой-нить абзац текста P внутри этого DIVa – известно лишь что он(текст) точно поместится в заданную высоту DIVa
- Нужно отцентрировать этот текст по вертикали без использования таблиц
Вот такая непростая задачка.
Пускай HTML код такой:
- <div>
- <p>
- Because the Welsh and Roman heritage was almost entirely erased by the invasion of low German and then Scandinavian populations….
- </p>
- </div>
Для нормальных броузеров
Для всех броузеров кроме winIE и macIE работает такой CSS код:
- div {
- display: table-cell;
- vertical-align: middle;
- }
Можно посмотреть мой пример здесь – но помните работает только в “нормальных” броузерах (не ИЕ).
для IE
А вот тут начинаются извраты…
Изврат Метод n1:
Стили прямо в коде – внизу ссылка на оригинал с разделением CSS и HTML
- <div style=”display: table; height: 400px; _position: relative; overflow: hidden;”>
- <div style=” _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;”>
- <p style=” _position: relative; _top: -50%”>
- any text<br />
- any height<br />
- any content, for example generated from DB<br />
- everything is vertically centered
- </p>
- </div>
- </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:
- <div class=”wrap”>
- <div class=”valign-center”>
- <p>lenzi, e profondissima quiete</p>
- <p>infinito silenzio a questa voce vo comparando: </p>
- </div>
- <div class=”just-for-IE”></div>
- </div>
И теперь центрируем для всех нормальных через display: table-cell;vertical-align: middle;, а для ИЕ используем извраты с height:100%; и display: inline-block:
- .wrap {
- display: table-cell;
- vertical-align: middle;
- width: 100%;
- height: 401px;
- }
- .just-for-IE {
- display: none;
- width: 1px;
- margin-left: -1px;
- }
- * html .just-for-IE, * html .valign-center {
- display: inline-block;
- vertical-align: middle;
- }
- * html .valign-center {
- width: 100%;
- }
- * html .just-for-IE {
- height: 100%;
- }
- * html .just-for-IE, * html .valign-center {
- display: inline;
- }
Вот такой, мягко говоря немаленький, CSS и то ужатый(не считаю нужным поддерживать IE5Mac). Полную и рабочую версию можно посмотреть здесь
n4:способ с помощью expression, смотрите в новом посте Еще один способ вертикального выравнивания в CSS.
Вывод
Если очень хочется(выровнять по центру), то можно. И даже будет работать – главно в хаках потом не запутаться…
Пока писал, думал – сча пару изящных хаков в две строки – нифига…. :(
Ну зато хоть есть откуда передирать теперь.
К сожалению, чаще всего известная высота родительского блока или контента, это сферический конь в вакууме
Тогда нужно поиграться с heigh:100% – метод номер 2 в посте и есть пример – высота окна броузера в точности равняется сферическому коню в вакууме.
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Спасибо!
Жаль тока что тут надо знать высоту центрируемого блока – но зато без хаков.
[...] table – использование малоизвестного CSS свойства для решения частой проблемы с floatами. vertical-align:middle – вертикальное центрирование с помощью CSS – обзор техник. pravda.c [...]
Privet Pupsiki !!!
Suslik? ты уверена что по адресу?
[...] инаковой height и line-height – одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=" [...]
[...] инаковой height и line-height – одна строка текста внутри блока центрируется по вертикали (уже писал) А у нас как раз одна строка с процентами. Вот и хорошо. <li class=" [...]
Объясните же мне смысл вертикального позиционирования блоками!?
Мне кажется с таким подходом никто вам ничего обьяснять не будет – и так уже противники нормальнй верстки привыкли что мы с пеной у рта им что то рассказываем. Пора уже самим понять что хорошо верстать лучше. )
Может я что-то неправильно понял, но CSS стиль div.middle { display: table-cell; vertical-align: middle; }, нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?… Зато только в “глюкавом” и насквозь “прогнившем” IE 7 мне удалось отобразить модель сайта полностью удовлетворяющую заданному эскизу, чего кстати нельзя сказать об остальных броузерах.
Странно вот тут я сделал пример этой техники
http://cssing.org.ua/examples/valign/
и в моих 8-9 операх все работает. Может быть что то другое в верстке не так?
Центрированный по вертикали (третьим способом), блок ни в какую не хочет центрироваться по горизонтали в нормальных браузерах… знает кто, как решить?
Третий способ очень сложный в этом смысле, может быть стоит попробовать новый вариант вертикального выравнивания – он менее зависим от этих параметров
Цитата:
“нифига не работает в Opera 8, Opera 9, Netscape 8.1, Netscape 9.0 или это тоже ненормальные броузеры?…”
Стиль {display: table-cell; vertical-align: middle;} действительно не работает не только в этих браузерах , но и в FireFox 1.5 и.т.д.
Причина – ни автор, ни др. уважаемые посетители не пожелали упомянуть, что для эмуляции блоком свойств табличной ячейки необходим контейнерный блок со свойствами таблицы. Т.е. со свойством {display: table;}
В догонку.
Контейнерный блок не обязателен, если документ есть не чистый HTML, а
Ежели документ будет , то без контейнерного блока не обойтись.
Так и есть, спасибо за замечание, к сожалению обьять необьятное нельзя. Я всегда использую XHTML доктайпы и потому сия проблема меня обходила.
> Контейнерный блок не обязателен, если документ есть не чистый HTML, а
Tutta Karlsson, можно где-нибудь увидеть пример, где работа display: table-cell; зависит от доктайпа? Я, как ни бился, воспроизвести так и не смог…
[...] копий сломано на ниве вертикального выравнивания без таблиц. Однако [...]
когда же сделают чтоб все просто было? бесит браузеры эти!!!
Но display: table-cell; не работает применительно к спискам UL. Например необходимо в LI вертикально отцентрировать однострочный или многострочный элемент a (ссылу). У LI фиксированная высота. Если указывать display: table-cell; то список раскладывается как таблица.
Мне повезло и мне всегда этот список в таком виде и нужен был. =)
Но можно же добавить еще одну обертку внутрь li, и для li задать table.
Или выйти из ситуации через 3 спана, и абсолютное позиционирование. Зависит от дизайна.
[...] за идею и Витале Харисову за то, что её раскопал в архивах cssing.org.ua и добавил в код элегантности [...]
Как-то нужно было поместить кнопочку фиксированной высоты (с абсолютным позиционированием) в центр блока неизвестной высоты, сделал так:
.block {position: relative;}
.button {position: absolute; height: 50px; top: 50%; margin-top: -25px;}
Как видно, указываем top: 50%, для того, чтобы вершина кнопки была посередине, а чтобы сама кнопка была посередине, поднимаем её на половину высоты кнопки (50px/2 = 25px). Таким образом кнопка будет по центру (middle) при любой высоте блока.
браузер пишется через А а ААА ааа – запомнил?
Спасибо Кэп! Я вернусь в 2005й год на своей машине времени и всем об этом расскажу ;)
Отличная статья. Очень полная. Хотя в принципе не хватает 1 варианта с хаком для ИЕ через кондишнл комментс. Когда для всех брарузеров делается это через тейбл-селл, а для ИЕ в кондишнл комментсах делается настоящая таблица. В итоге получаем везде дивную, а в ИЕ табличную верстки. )
Ваш пример (http://cssing.org.ua/examples/valign/index1.html) не работает в IE7 (ie tester).
Кажется что условные комментарии в оригинальной статье (http://www.brunildo.org/test/vertmiddle.html) там были для этого.
Интересно что свойства display: table-cell; vertical-align: middle; не работаю вместе со свойством position:absolute;
про машину времени понравилось :))))
DEM84, в современных браузерах работает display:table-cell ;)
Slaffko, еще они не работают вместе с float:right|left … Без вложенного контейнера не обойтись..
Большое спасибо за хаки
Спасибо, помогло
Нашёл более простую версию:
http://divhack.com/node/26
Оставить комментарий