Просмотров: 47 975

Выравнивание текста по вертикали и по центру с помощью 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. Но слава интернету , и спасибо вам))

  • https://www.facebook.com/app_scoped_user_id/1738590999798309/ Olena Chornovol

    Спасибо огромное! Версткой только начала заниматься. Выполняя домашку не могла сообразить как же выровнять текст, если не работает vertical-align. Еще раз спасибо!

  • http://vk.com/id18397417 Дмитрий Ченгаев

    Пожалуйста. Рад, что оказалось полезным.