Урок 21 із 104
20%
← Назад

Вирівнювання тексту по вертикалі в комірках CSS

Вивчаємо властивість vertical-align для вертикального вирівнювання тексту всередині комірок таблиці.

Властивість vertical-align

Властивість vertical-align використовується для зміни вертикального положення тексту або інших елементів всередині комірок таблиці.

Найчастіше вона використовується для елементів td та th у таблицях.

Основні значення

  • top — вирівнювання по верхньому краю комірки.
  • middle — вирівнювання по центру комірки.
  • bottom — вирівнювання по нижньому краю комірки.
  • baseline — вирівнювання по базовій лінії тексту (значення за замовчуванням).

Приклад таблиці


<table>
  <tr>
    <td>Текст 1</td>
    <td>Текст 2</td>
    <td>Текст 3</td>
  </tr>
</table>

Вирівнювання по верхньому краю


table {
  width: 400px;
  height: 200px;
}

td {
  border: 1px solid black;
  vertical-align: top;
}

Вирівнювання по центру


td {
  border: 1px solid black;
  vertical-align: middle;
}

Вирівнювання по нижньому краю


td {
  border: 1px solid black;
  vertical-align: bottom;
}
❗ Важливо:

У flex-контейнерах для вертикального вирівнювання частіше використовують align-items, а vertical-align переважно застосовується для таблиць та inline-елементів.

Практичне завдання

📌 Завдання:
  1. №1. Створіть таблицю з кількома рядками.
  2. №2. Задайте коміркам висоту.
  3. №3. Перевірте роботу vertical-align зі значеннями top, middle та bottom.
💡 Показати підказку

Щоб побачити результат vertical-align, комірки повинні мати висоту більшу за висоту тексту.

✅ Показати відповідь

table {
  width: 400px;
  height: 200px;
}

td {
  border: 1px solid black;
  vertical-align: middle;
}