Css vertical-align, приклади
Властивість CSS vertical-align відповідає за вертикальне вирівнювання тексту, картинок на сторінці. Важливою особливістю є те, що він працює тільки з елементами таблиці, inline і inline-block елементами. Підтримується всіма сучасними браузерами.
Синтаксис CSS vertical-align
Де value може набувати таких значень:
- baseline - вирівнювання по базовій лінії предка (або просто нижня межа батька)
- bottom - вирівнювання по нижній частині рядка (або елемента, який розташовується нижче всіх)
- middle - вирівнювання середньої точки елемента за базовою лінії батька плюс половина висоти батьківського елементу
- sub - відображення відбувається під рядком (виглядає як підрядковий індекс)
- super - відображення відбувається над рядком (як верхній індекс)
- text-bottom - вирівнювання нижньої межі елемента по нижньому краю рядка
- text-top - вирівнювання верхня межі елементу по верхньому краю рядка
- top - вирівнювання верхня краю елемента по верху найвищого елемента рядка
- inherit - успадковує значення батька
- значення - вказується в пікселях. Позитивне число зміщує вгору щодо базової лінії. негативне вниз
- відсотки - вказується в процетов. Позитивне число зміщує вгору щодо базової лінії. негативне вниз
Значення vertical-align за замовчуванням:
- baseline (для малих елементів)
- middle (для елементів таблиці)
Вертикальне вирівнювання в таблицях
Найчастіше vertical-align використовується в осередках таблиць. У тезі