Vertical align – одна з властивостей CSS, яка дає змогу вертикально вирівнювати елементи на веб-сторінці. Це дуже корисна властивість, яка допомагає створювати більш естетичні та професійні макети.
Vertical align може застосовуватися до різних типів елементів, таких як текст, зображення, таблиці та навіть фонові зображення. Коли властивість vertical align працює, вона дає змогу вирівняти елементи посередині контейнера або за іншою обраною базовою лінією.
Вертикальне вирівнювання може бути корисним, коли потрібно створити рівномірний розподіл елементів по вертикалі або коли необхідно вирівняти текст по центру блоку. Властивість vertical align використовується в поєднанні з іншими властивостями CSS, такими як display, float, position та інші, щоб досягти потрібного ефекту вирівнювання.
| Верх | По центру | Вниз |
|---|---|---|
| Комірка 1 | Комірка 2 | Комірка 3 |
| Комірка 4 | Осередок 5 | Осередок 6 |
Коли працює Vertical-Align?
Властивість vertical-align може використовуватися у двох контекстах: Для вертикального позиціонування області рядкового елемента всередині рядка, який його містить. Наприклад, за допомогою неї можна задати вертикальне позиціонування зображення в рядку тексту. Для вертикального позиціонування вмісту комірки таблиці.
Які значення може набувати властивість vertical-align?
Кілька ключових слів, які можна задавати як значення для властивості vertical-align :
- baseline , значення за замовчуванням або “початкове”
- bottom.
- middle.
- sub.
- super.
- text-bottom.
- text-top.
- top.
Як вирівняти текст по вертикалі в CSS?
За вирівнювання по горизонталі відповідає CSS-властивість text-align . Найчастіше використовуються значення left , center і right . За вирівнювання по вертикалі відповідає CSS-властивість vertical-align . Найчастіше використовуються значення top , middle і bottom .