Иногда, при HTML-верстке страниц, необходимо выровнять некий блок по центру
вертикали родительского. Новички, наткнувшись на свойство CSS
«vertical-align:middle», сразу же пытаются использовать его, якобы, по
назначению, но не всё так просто.
Это свойство может быть пригодно только в
двух случаях: в первом — оно аналогично аттрибуту valign="middle" у HTML-тега
<TD> и будет работать как задумано. Во втором случае его можно
использовать для выравнивания двух или более рядом стоящих линейных блоков
(display:inline).
В остальных случаях, если мы хотим выравнять по центру
вертикали родительского блока HTML-элемент, этот вариант не прокатит. Для этого,
есть три не идеальных, но решения.
Если вам не критично, как сделано
(сверстано) выравнивание, то используйте самый древний и проверенный годами
способ выравнивания внутри ячейки таблицы (TABLE → TR → TD). Если же, всё-таки,
нужна блочная (дивная) верстка и выравнивание в нем, то читаем
дальше.
Итак, первое решение. Оно заключается в
использовании свойств display:table + display:table-cell + vertical-align:middle
(для нормальных браузеров понимающих эти свойства CSS) и для нашего любимого
инвалида IE (до 8-й версии), мы будем использовать не безизвестный
expression.
Если поточнее, для браузеров отличных от Internet Explorer, мы
будем использовать полноценную замену таблицы через аналогичные свойства в CSS,
для IE — программно высчитываем высоту выравниваемого блока и выставляем отступ
внутри родительского.
В итоге мы имеем следующий HTML/CSS код:
<style type="text/css">
.sample { position:relative; border:1px solid #eee; margin-bottom:15px; margin-top:5px; }
.sample.one { width:300px; height:300px; }
.sample.one .table { display:table; width:100%; height:100%; }
.sample.one .td { display:table-cell; vertical-align:middle; height:100%; }
.sample.one span { position:relative; display:block; width:50%; margin:auto; text-align:center;
//top:expression( this.parentNode.offsetHeight/2 - this.offsetHeight/2 ); /* IE 6,7*/ }
</style>
<div class="sample one">
<div class="table">
<div class="td">
<span>Блок выравниваемый по центру вертикали</span>
</div>
</div>
</div>
Решение два. Оно может
понадобиться лишь тогда, когда выравнивается линейный элемент внутри
родительского блока. С блочными этот способ не канает. Применение этого способа
часто используется во всяких меню и табах.
Есть такое свойство CSS
«line-height», которое определяет высоту строки текста. Так вот, если на блочный
элемент поставить высоту строки, равную высоте этого самого блока, то текст
внури блока будет выровнен по центру вертикали.
Но, важно, чтобы строки были
только в одну линию (white-space:nowrap или HTML-тег <nobr>). Рассмотрим
применение этого способа на примере горизонтального меню:
<style type="text/css">
.sample { position:relative; border:1px solid #eee; margin-bottom:15px; margin-top:5px; }
.sample.two { padding:15px; zoom:1; }
.sample.two a { display:block; height:40px; line-height:40px; float:left; background:#eee; padding:5px 1em;
margin-right:15px; white-space:nowrap; }
.sample.two a:hover { color:white; background:#666; }
</style>
<div class="sample two">
<a href="#">Главная</a>
<a href="#">О компании</a>
<a href="#">Портфолио</a>
<a href="#">Услуги</a>
<a href="#">Контактная информация</a>
<br clear="all" />
</div>
Третье, и последнее решение,
пригодно тогда, когда нам заранее известная высота выравниваемого блока. И этот
способ заключается в использовании абсолютного позиционирования этого самого,
выравниваемого блока, внутри родительского.
Для того чтобы выравнять
абсолютно спозиционированный блок по центру, мы будем использовать свойства
«left, top и margin». Думаю, вы уже догадались, каким именно образом они помогут
нам выравнять наш блок по центру вертикали.
Для свойств left и top мы сразу
же выставим значения, равные 50%. Для margin, надо будет задать отрицательные
отступы вверх и влево, равные соответственно, половине высоты и ширины
выравниваемого блока.
Звучит просто? А теперь посмотрим на деле:
<style type="text/css">
.sample { position:relative; border:1px solid #eee; margin-bottom:15px; margin-top:5px; }
.sample.three { width:300px; height:300px; }
.sample.three span { position:absolute; left:50%; top:50%; width:50%; height:70px; margin:-35px 0 0 -25%;
background:#f1f1f1; text-align:center; }
</style>
<div class="sample three">
<span>Блок выравниваемый по центру вертикали</span>
</div>
|
