Просмотров: 32 113

Выравнивание текста по вертикали и по центру с помощью CSS.

Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.

Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.

Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.

Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.

Для блочных элементов свойство vertical-align не работает.

Есть два способа, как можно выйти из этой ситуации:

Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.

<table>
<tr>
<td style="height:300px; vertical-align:middle; width:500px; text-align:center; border:1px solid #000;">
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</td>
</tr>
</table>

выравнивание текста по вертикали cssСпособ Б. Использовать своство display:table-cell;

<div style="height:300px; vertical-align:middle; display:table-cell; width:500px; text-align:center; border:1px solid #000;">
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>

Все было бы хорошо, но старые браузеры не поддерживают display:table-cell, особенно IE с версии 7 и ниже.

Можно, конечно, наплевать на эти старые браузеры и выравнивать текст так. Доля браузера IE7 на моем сайте, по статистике за 1 квартал 2013 года, следующая:

04-05-2013 13-04-22

Это меньше чем пол процента от всех посещений. В будущем этот процент будет еще более снижаться.

Есть некоторые хитрости, которые позволяют обойти эту проблему в IE7, но это значительное усложнение кода.

Кроме того, есть ситуации, в которых можно обойтись вообще без использования display:table-cell.

Ситуация 1. Выравнивание одной строки текста.

Рассмотрим простой пример.

<div style="height:100px; width:500px; text-align:center; border:1px solid #000;">Строка, которая должна быть выровнена по вертикали</div>

Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.

<div style="height:100px; line-height:100px; width:500px; text-align:center; border:1px solid #000;">Строка, которая должна быть выровнена по вертикали</div>

Выравнивание по вертикали одной строки CSS

Этот способ хорошо работает, когда у вас всего одна строка с текстом.

Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.

Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.

<div style="height:300px; width:500px; text-align:center; border:1px solid #000; position:relative;">
<div style="position:absolute; top:50%; left:50%; margin-top:-75px; margin-left:-150px;  width:300px; height:300px;">
<p>Строка 1</p>
<p>Строка 2</p>
<p>Строка 3</p>
</div>
</div>

выравнивание текста по вертикали css

Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.

Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.

Этот материал входит в соостав курса «Базовые приемы верстки веб-страниц»

К списку всех материалов курса. Доступ можно получить в группе вконтакте, в разделе «Ссылки».

 

  • http://vjach.ru вячеслав владимирович

    div class=»layer1″
    // Этот код выведет обложку фильма, которая является ссылкой на фильм в магазине с нужным ID адверта.
    print ‘
    print »
    print ‘

    Дмитрий!
    помоги пожалуйста разобраться в этом коде,может где ошибка есть
    у меня нет картинки в обложке фильмов,должна быть картинка ,а там иконка.
    можно платно,но пожалуйста не дорого

  • Дмитрий

    Вячеслав, здравствуйте.

    Напишите, пожалуйста, на e-mail, который указан в разделе контакты. Обсудим этот вопрос.

  • http://format-c.ho.ua Максим

    О… вот спасибо… щас попробуЮ… А пост — в избранное!!!

  • http://xn--80aesjq1aqt.xn--90ais/ Адвокат

    Да уж, мучауся с выравниванием по вертикали, долго копался в CSS. Но слава интернету , и спасибо вам))