Неактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зіркаНеактивна зірка
 

Вирівнювання тексту по вертикалі за допомогою CSS декількома способами. Прості рішення не завжди простої проблеми. Вирівняти текст по центру по горизонталі легко — тут працює практично у всіх випадках старий добрий стиль text-align:center, який відмінно працює і в табличних комірках і в дівах:

<div style="text-align: center;">Текст, який потрібно вирівняти по горизонталі</div>

З вирівнюванням по вертикалі трохи складніше, але є перевірені способи. Наприклад, vertical-align підходить для комірок таблиць і елементів в одному рядку відносно один одного. Можна додати до vertical-align властивість display:table-cell і спробувати вирішити таким чином вирівнювання і для інших випадків:

<div style="height:200px; width: 400px; vertical-align:middle; display:table-cell;">
<p>Текст для вирівнювання по вертикалі</p>
<p>Текст для вирівнювання по вертикалі 2</p>
<p>Текст для вирівнювання по вертикалі 3</p>
</div>

Мій улюблений спосіб вирівнювання тексту по вертикалі в CSS — властивість line-height. Тут важливий нюанс, щоб цей варіант спрацював — значення line-height має дорівнювати значенню height.

<div style="width:400px; height:200px; line-height:200px;">
<p>Текст бла бла бла</p>
<p>Текст бла бла бла</p>
<p>Текст бла бла бла</p>
</div>

Це найпростіші і затребувані способи вирішення, які легко і просто запам'ятати.