css властивість vertical-align
Властивість vertical-align задає вертикальне вирівнювання для рядкового елемента або елементу таблиці.
Властивість може бути використана у двох випадках:
для вертикального вирівнювання рядкового елементу, який міститься в іншому рядковому елементі. Наприклад,
vertical-alignможе бути використаний для вирівнювання картинки(<img>), яка розміщена у рядку.для вирівнювання по вертикалі в комірках таблиці:
baseline- вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента.bottom- вирівнює по нижньому краю комірки.middle- вирівнює по середині комірки.top- вирівнює вміст комірки по його верхньому краю.
Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне значення зміщує елемент вгору щодо базової лінії, в той час як негативне значення опускає його вниз. При використанні відсотків, відлік ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.
| Нотатка: | Допустимі до використання негативні значення. Зверніть увагу, що властивість |
Синтаксис
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;
}Вирівнювання картинки(), яка розміщена у рядку
Вертикальне вирівнювання вмісту таблиці
Приклад роботи різних значень
Демонстрація роботи властивості