Vertical-align — одно из самых сомнительных CSS свойств, которое, вроде-бы и работает, но по факту, из-за своих специфических требований — нет. Давайте разбираться, почему так происходит и что нужно, чтобы оно заработало
Многие все еще помнят те времена, когда в верстке повсеместно использовались таблицы, к ячейкам которых применялись:
<td valign="top">Some text...</td>
По умолчанию все элементы центрируются по центру вертикальной оси и такой трюк поднимает все элементы внутри ячейки вверх. В CSS свойство vertical-align работает частично так же, но подчиняется трем правилам:
- Применяется только к inline или inline-block элементам;
- Выравнивает лишь элемент, к которому применяется, а его содержимое не трогает;
- В таблицах наоборот. влияет на содержимое, а ячейку не трогает;
Это значит, что код ниже абсолютно ничего не делает, т.к. первый пункт не выполнен – не задан тип блока.
div {
vertical-align: middle; /* ничего не делает */
}
Ну а если нет возможности указать inline или inline-block блок, то на помощь всегда придут padding и margin. Пример ниже для не фиксированной высоты блока, где мы отступами отрегулируем оптимальную высоту и элементы останутся в центре и на этом конец.
.div{
font:1rem;
padding:5px 0; /* текст останется в центре */
}
Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.
Комментарии