css властивість vertical-align
Властивість vertical-align задає вертикальне вирівнювання для рядкового елемента або елементу таблиці.
Властивість може бути використана у двох випадках:
для вертикального вирівнювання рядкового елементу, який міститься в іншому рядковому елементі. Наприклад,
vertical-alignможе бути використаний для вирівнювання картинки(<img>), яка розміщена у рядку.для вирівнювання по вертикалі в комірках таблиці:
baseline- вирівнює базову лінію комірки з базовою лінією першого текстового рядка або іншого вкладеного елемента.bottom- вирівнює по нижньому краю комірки.middle- вирівнює по середині комірки.top- вирівнює вміст комірки по його верхньому краю.
Як значення також можна використовувати відсотки, пікселі або інші доступні одиниці. Позитивне значення зміщує елемент вгору щодо базової лінії, в той час як негативне значення опускає його вниз. При використанні відсотків, відлік ведеться від значення властивості line-height, при цьому 0% аналогічно значенню baseline.
- Нотатка
-
Допустимі до використання негативні значення. Зверніть увагу, що властивість
автор: Svitlanavertical-alignне впливає на блокові елементи!
Синтаксис
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
| Значення без задання: | baseline |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.verticalAlign="top" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 4 | 12 | 4 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Картинки в рядку вирівнюються відносно тексту: перша — верхом по верхівці рядка (text-top), друга — по базовій лінії (типово).
HTML
<p>Рядок тексту з <img class="tt" src="/img/logo.svg" alt="text-top"> картинкою text-top і <img class="bl" src="/img/logo.svg" alt="baseline"> картинкою baseline.</p>CSS
img {
width: 40px;
}
.tt { vertical-align: text-top; }
.bl { vertical-align: baseline; }Демонстрація роботи властивості
Вирівнювання картинки(<img>), яка розміщена у рядку
Вертикальне вирівнювання вмісту таблиці
Приклад роботи різних значень
Коментарі
Коментарів ще немає — будьте першим!