< The Webmakers Lounge />

Вертикальное выравнивание текста внутри ячейки таблицы всегда просто. Достаточно использовать 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.

Эта запись опубликована в Суббота, 21/04/2007 , 2:58 дп и размещена в рубрике CSS. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.