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


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

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

Властивість може бути використана у двох випадках:

  • для вертикального вирівнювання рядкового елементу, який міститься в іншому рядковому елементі. Наприклад, vertical-align може бути використаний для вирівнювання картинки(<img>), яка розміщена у рядку.

  • для вирівнювання по вертикалі в комірках таблиці:

  • baseline - вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента.
  • bottom - вирівнює по нижньому краю комірки.
  • middle - вирівнює по середині комірки.
  • top - вирівнює вміст комірки по його верхньому краю.

Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне значення зміщує елемент вгору щодо базової лінії, в той час як негативне значення опускає його вниз. При використанні відсотків, відлік ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.

Нотатка:

Допустимі до використання негативні значення. Зверніть увагу, що властивість vertical-align не впливає на блокові елементи!

Синтаксис

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

Властивість vertical-align може отримувати 12 значень:

baseline

Вирівнює базову лінію поточного елемента за базовою лінії батька.

length

Піднімає або опускає елемент на задану відстань. Від'ємні значення дозволені.

sub

Елемент зображується як підрядковий у вигляді нижнього індексу. Розмір шрифту при цьому не змінюється

super

Елемент зображується як надрядковий у вигляді верхнього індексу. Розмір шрифту залишається незмінним.

top

Вирівнювання верхнього краю елемента по вершині найвищого елемента рядка.

text-top

Верхня межа елемента вирівнюється за найвищим текстовим елементом поточного рядка.

middle

Елемент буде по середині батьківського елемента.

bottom

Вирівнює основу поточного елемента по нижній частині рядкового елемента, розташованого нижче всіх.

text-bottom

Основа елемента вирівнюється по самому нижньому краю поточного рядка.

%

Піднімає або опустити елемент у відсотках від властивості line-height. Від'ємні значення дозволені.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: baseline
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.verticalAlign="top"

Переглядачі

Переглядач
vertical-align

1.0

4.0

1.0

1.0

4.0

12.0

Переглядач
vertical-align

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Вирівнювання зображення по вертикалі.

img {


    vertical-align: text-top;


}

Вирівнювання картинки(), яка розміщена у рядку

Вертикальне вирівнювання вмісту таблиці

Приклад роботи різних значень

Демонстрація роботи властивості

Додаткові посилання