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

ver_centr   Довольно часто нам требуется выровнять текст по вертикали в блоке 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;">

Строка 1

Строка 2

Строка 3
</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;">

Строка 1

Строка 2

Строка 3
</div>
Все было бы хорошо, но старые браузеры не поддерживают display:table-cell, особенно IE с версии 7 и ниже. Есть некоторые хитрости, которые позволяют обойти эту проблему в 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;">

Строка 1

Строка 2

Строка 3
</div>
</div>
выравнивание текста по вертикали css
Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top. Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.
Источник: http://webgyry.info/vertical-align-css

Оставить комментарий