Вертикальное выравнивание текста внутри ячейки таблицы всегда просто. Достаточно использовать vertical-align: middle, вот и все дела. Но как вы знаете, эта фишка не работает в блочной верстке.
Что же делать?
Допустим у нас есть горизонтальное меню в виде списка высотой 40 пикселей. А в нем ссылки:
<h1>Вертикальное выравнивание текста внутри блока</h1>
<ul>
<li><a hrеf="#">Bla</a></li>
<li><a hrеf="#">Bla</a></li>
<li><a hrеf="#">Bla</a></li>
</ul>Можно сколько угодно раз прописать vertical-align для li, все равно ничего путевого из этого не выйдет. Текст прижмется к верхней границе списка.
Можно конечно отжимать с помощью padding‘a, но это сработает только в том случае, когда все значения прописаны в абсолютных величинах – пикселях. В случае с em это не подойдет.
Существует простое и элегантное решение, которое не всем известно. Нужно указать свойство line-height для текста, равное высоте контейнера и текст встанет ровно по серединке блока!
ul{
width: 600px;
height: 40px;
}
ul li{
float: left;
display: block;
height: 40px;
line-height: 40px;
}В данном примере высота явно указана и для ul, так как я сделал меню горизонтальным с помощью указания float:left для li. В вертикальном меню указание высоты нужно только для контейнера текста, то есть только li.
Или давать padding в em’ах. Тоже хорошо работает.
[quote comment="315"]Или давать padding в em’ах. Тоже хорошо работает.[/quote]
Считать тяжелее, и будут дополнительные траблы если использовать сложные бэкграунды.
“Фишка” с vertical-align: middle все-таки работает в семантической верске. Так как таблицы тоже ее часть, если используются по назначению. Я переписал бы начало, а в остальном вроде хороший материал.
Кстати, пытался запостить сюда коммент с мобилы (Нокия, Симбиан, Опера-мини). Безуспешно. Сказало: нет такой страницы :(
< uggallery
Дельное замечание. Как то я упустил этот момент :) Исправил.
[quote post="91"]Кстати, пытался запостить сюда коммент с мобилы (Нокия, Симбиан, Опера-мини). Безуспешно. Сказало: нет такой страницы[/quote]
Хм, надо будет попробовать.
Нашел поздно, сам над этим бился :) Кстати, у меня все работает для вертикального списка просто с line-height=40px, без height в li.
Спасибо большое! Долго над этим думал, как сделать по стандартам =)
(большой) минус в сранении с таблицами: нужно явно указывать высоту.
Помимо того, что это неудобно, так еще и противоречит духу css (imho)
@Ash
Эта техника вобще “костыль”, предназначеный для удовлетворения нужд неразумных заказчиков, который противоречит духу верстки. Но, как говорится — на безрыбье и рак рыба :)
А если будет на “bla”, “bla bla bla bla bla bla bla bla bla bla bla ” и поползет на вторую строку, по все расподается :(
Сделал div 100 на 50, в нем ссылка текстовая, указал ссылке line-height: 50px и нечего, все равно к верху прилипла
Юлий, задайте line-height для div
А если в списке 2 элемента идин из которых занимает одну строку и второй две?
имеем потерю текста?
>>Достаточно использовать vertical-align: middle, вот и все дела. Но как вы знаете, эта фишка не работает в блочной верстке.
прекрасно она в блочной верстке работает. но не используется исключительно благодаря гордыне «рулевых» компании микрософт и безрукости «творцов» IE (6 и 7). :(
Респект автору! Все работает!!