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 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 0 comments