can3p (can3p) wrote,
can3p
can3p

Вертикальное центрирование текста в блоке

Очень часть появляется задача  отцентрировать что-то по вертикали: будь то блок или просто текст. Про первый вариант я уже писал, о втором ниже. Для однострочного текста решение тривиально – просто задаем 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 &#038;&#038;
                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
Tags: css, html
Subscribe
  • Post a new comment

    Error

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 0 comments