CSS — разбираемся почему не работает vertical-align

vertical align css - CSS — разбираемся почему не работает vertical-align

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; /* текст останется в центре */
}

Аналогично и с фиксированной высотой. Вручную ставим оптимальный отступ до тех пор, пока элементы не займут оптимальную позицию. Отличием от примера выше является то, что элементы не будут находиться по центру.

Читайте также

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *