СВОЙСТВО VERTICAL-ALIGN
Свойство vertical-align устанавливает вертикальное выравнивание элемента относительно своего родительского элемента, текста или ячейки таблицы.
Поддержка браузеров
| 9+ | ||||
Синтаксис
vertical-align: baseline|единицы измерения|проценты|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit
Значения свойства
| Значение | Описание |
|---|---|
| baseline | Элемент выравнивается с базовой линией родительского элемента. Это значение по умолчанию. |
| единицы измерения | Поднимает или опускает элемент на указанное расстояние в единицах измерения. Отрицательные значения допускаются. |
| проценты | Поднимает или опускает элемент в процентах от свойства line-height. Отрицательные значения допускаются. |
| sub | Выравнивает базовую линию элемента с базовой линией нижнего индекса его родительского элемента. |
| super | Выравнивает базовую линию элемента с базовой линией верхнего индекса его родительского элемента. |
| top | Элемент выровнен по верху самого высокого элемента в строке. |
| text-top | Элемент выравнивается по верху текста родительского элемента. |
| middle | Элемент находится по центру родительского элемента. |
| bottom | Элемент выровнен по низу строки. |
| text-bottom | Элемент выравнивается по низу текста родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
| inherit | Унаследует значение свойства от родительского элемента. |
Песочница
<p>Выравнивание <img src="/images/marker.png" width="10" height="10"> по умолчанию.</p> <p>Выравнивание <img class="text-top" src="/images/marker.png" width="10" height="10"> text-top.</p> <p>Выравнивание <img class="text-bottom" src="/images/marker.png" width="10" height="10"> text-bottom.</p> <p>Выравнивание <img class="sub" src="/images/marker.png" width="10" height="10"> sub.</p> <p>Выравнивание <img class="super" src="/images/marker.png" width="10" height="10"> super.</p>HTML
.text-top {
vertical-align: text-top
}
.text-bottom {
vertical-align: text-bottom
}
.sub {
vertical-align: sub
}
.super {
vertical-align: super
}
CSS