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

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

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


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery — таймер обратного отсчета с изменяемой скоростью
Рассмотрим наглядный пример управления таймером на jQuery. Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...

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