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

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

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

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

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

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

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

правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

baseline

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

автор: Svitlana

правити

length

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

автор: Svitlana

правити

sub

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

автор: Svitlana

правити

super

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

автор: Svitlana

правити

top

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

автор: Svitlana

правити

text-top

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

автор: Svitlana

правити

middle

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

автор: Svitlana

правити

bottom

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

автор: Svitlana

правити

text-bottom

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

автор: Svitlana

правити

%

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<p>Рядок тексту з <img class="tt" src="/img/logo.svg" alt="text-top"> картинкою text-top і <img class="bl" src="/img/logo.svg" alt="baseline"> картинкою baseline.</p>

img {
    width: 40px;
}

.tt { vertical-align: text-top; }
.bl { vertical-align: baseline; }