Очень часть появляется задача отцентрировать что-то по вертикали: будь то блок или просто текст. Про первый вариант я уже писал, о втором ниже. Для однострочного текста решение тривиально – просто задаем line-height равным высоте блока и получаем нужный эффект. А теперь представим себе резиновую верстку, горизонтальное меню. Сжимаем окно броузера, в какой-то момент, один из пунктов начинает умещаться только в две строки, и все летит к чертям.
Пусть имеется меню вида:
<div class="wrap"> <div class="container"> <ul class="menu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">long item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </div> </div>
Набросаем структуру и немного графических красот:
* { margin: 0; padding: 0; font: 1.05em Tahoma serif; } .wrap { min-width: 600px; } .container { width: 80%; margin: 50px auto; } .menu { list-style-type: none; display: block; width: 100%; height: 50px; } .menu li { width: 20%; float: left; } .menu a { text-decoration: none; height: 60px; color: #000; text-align: center; background-color: #99dd99; }
Далее на помощь приходят свойства display, а именно table и table-cell.
После установки .menu li display: table, а .menu a – display: table-cell; vertical-align: middle; в современных броузерах все встает на места. 6 и 7 эксплореры конечно же с этим не согласны – там эти свойства не воспринимаются.
После некоторого гугления вышел на пример известного Stu Nicholls, который нашел магическую комбинацию, работающую в эксплорере. За это придется заплатить двумя лишними span тегами, но зато будет работать.
Приводим пункты меню к следующему виду:
<li><a href="#"><span class="sizer"></span><span class="mitem">item 1</span></a></li>
Плюс стили для осликов:
<!--[if lte IE 7]> .wrap { width:expression(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) < 601 ? "600px" : "99%"); } } .menu li { clear: right; } .menu li, .menu li a { display: block; } .menu .sizer { width: 0; height: 100%; display: inline-block; vertical-align: middle; } .menu .mitem { width: 100%; display: inline-block; vertical-align: middle; cursor: pointer; } <![endif]-->
Самый верхний стиль понадобился для эмуляции min-width, следующий нужен для того, чтобы при изменении размеров экрана блоки не прыгали. В данном случае настоящую ценность несут два последних правила, которые выполняют работу по центрированию.
На пальцах объяснить работу можно – первый блок расталкивает оборачивающих тег по вертикали, второй почему-то автоматом занимает то же пространство. А вот почему это так – бог его знает.
В качестве резюме скажу, этот метод уступает таблицам в том, что при переполнении отдельный блок на растягивает по вертикали всю конструкцию и изменяет только свой размер, так что способ хорошо работает только при фиксированной высоте блоков, что, впрочем, не отменяет его ценности.
Итоговый пример можно посмотреть здесь.
Оригинал: http://blog.dpetroff.ru/tech/vertical-align-2
