Выравнивание текста по вертикали. 5 способов

Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей. Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.

Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.

Первый метод с line-height

Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height.

<div class="talign1">
<p>первый пример. демо №1</p>
</div>

/* №1 */
.talign1{
        border: 1px solid red;
        height:200px;/* высота блока */
}
.talign1 > p{
        line-height:200px;/* устанавливаем высоту строки в соответствии с высотой блока */
        margin:0;/* убираем внешние отступы, если они есть */
        text-align:center;/* выравниваем текст по центре по горизонтали */
        padding: 0;/* убираем внутренние отступы, если они есть */
}
/* end №1*/

Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle;.

Пример. Демо №2

<div class="talign2">
<div><img src="img.jpg">Пример. Демо №2</div>
</div>

/* №2 */
.talign2{
        border: 1px solid red;
        line-height:200px;/* высота строки блока */
}

.talign2 div{
        text-align:center;/* выравниваем элементов по центре по горизонтали */
}
.talign2 img{
        vertical-align:middle;/* выравниваем картинки по центре по вертикали */
        border: 1px solid black;
}
/* end №2*/

Выравнивание со свойством position

Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.

Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.

В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.

<div class="talign3">
<div></div>
</div>

/* №3 */
.talign3{
        border: 1px solid red;
        height:200px;/* высота блока */
        position: relative;
}
.talign3 div{
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -5% 0 0 -25%;
    border: 1px solid black;
}
/* end №3*/

Выравнивание со свойством table

Здесь используем старую технику, превратив элементы в таблицу с ячейками. При этом теги таблицы <table> применять не будет, а воспользуемся свойствами CSS, такими как display: table;, display: table-cell;. В старых версиях IE данный способ не работает, да и не нужно. Ими, вообще, еще кто-то пользуется?

<div class="talign4">
<div>Пример. демо №4</div>
</div>

/* №4 */
.talign4{
        border: 1px solid red;
        height:200px;/* высота блока */
        display: table;
        width: 100%;
}

.talign4 div{
        display: table-cell;
        vertical-align: middle;
        text-align:center;
}
/* end №4*/

Выравнивание со свойством flex

Это идет уже более специфичный вариант со свойствами, которые не так часто встречаются в верстке сайта. Но, тем не менее они в редких случаях очень полезны.

<div class="talign5">
<div>Пример. демо№5</div>
</div>

.talign5{
        border: 1px solid red;
        height:200px;/* высота блока */
        display: flex;
        align-items: center;
        justify-content: center;
}

Выравнивание со свойством transform

И последний в нашем списке, но далеко не последний в использовании способ. Сдвигаем по вертикали элемент на желаемое значение, в данном случае на -50%.

<div class="talign6">
<div>Пример. демо №6</div>
</div>

/* №6 */
.talign6{
        border: 1px solid red;
        height:200px;/* высота блока */
}
.talign6 > div{
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        text-align:center;
}
/* end №6*/