«Vertical-align не работает!», — закричит web-разработчик.
Vertical-align является одной из тех особенностей CSS, которая звучит довольно очевидно, но может вызвать проблемы у начинающих разработчиков. Я думаю, что даже многие ветераны CSS сталкиваются с проблемами с этим свойством время от времени.
В этой статья я попытаюсь рассказать все в наиболее понятной форме.
Что оно не делает?
Наиболее неправильное представление о vertical-align это то, что если оно применено к элементу, то все элементы внутри этого элемента изменят свое вертикальное положение. Пример, когда мы используем vertical-align: top на элемент, то содержимое элемента поднимется в самый верх данного элемента.
Это напоминает мне то, как мы это делали в дни, когда повсеместно использовалась табличная верстка:
<td valign="top">
Whatever...
</td>
В данном табличном случае свойство valign (устаревшее) поднимет все содержимое в td-элементе наверх.
Поэтому, естественно, когда CSS разработчики начинают использовать вертикальное выравнивание, они предполагают, что оно будет работать так же — что содержание элементов выстроится в соответствии со значением свойства.
Но vertical-align так не работает!
Как на самом деле работает vertical-align?
Свойство vertical-align подчиняется трем правилам:
- Применяется только к inline или inline-block элементам
- Оно влияет на выравнивание самого элемента, а не его содержимого (исключение, когда свойство применяется к ячейкам таблицы)
- Когда применяется к ячейкам таблицы, значение влияет на содержимое, а не на саму ячейку.
div {
vertical-align: middle; /* ничего не делает */
}
Почему? Потому что <div> блочный элемент (block, а не inline). Конечно, вы можете конвертировать <div> в inline или inline-block элемент, тогда vertical-align будет иметь эффект.
С другой стороны, при правильном использовании (на inline или inline-block блок элемента), вертикальное выравнивание выровняет целевой элемент по отношению к другим элементам.
Как высоко вверх или вниз элемент будет выравнен зависит от размеров встроенных элементов на той же линии.
Немного визуализации
Вот наглядная демонстрация вместе с пояснительным текстом, чтобы помочь вам понять, что происходит, когда вы используете вертикальное выравнивание встроенных элементов:
Как видно, 3 левых элемента наседают на нашу воображаемую линию, а правый элемент со свойством vertical-align: top прижимается к верхней воображаемой линии. Воображаемая линия варьируется в зависимости от размеров элементов.
