Записки HTML-верстальщика: Крутое решение для выравнивания элемента по высоте
Здрасте всем!
Продолжаю освящать свои наработки в сфере вёрстки, которые не всегда можно быстро откопать на просторах интернета (а некоторые и нельзя откопать вовсе).
В этом посте я расскажу как можно выровнять одиноко стоящий элемент внутри контейнера по вертикали без использования свойства display:table-cell.
Проблема: выровнять элемент внутри ячейки по вертикали, которой нельзя добавить display:table-cell
Решение: для начала мы выровняем наш элемент по горизонтали. Это сделать не сложно: как Вы уже увидели, для основного контейнера мы добавили свойство text-align:center; Поэтому, чтобы выровнять контейнер по центру, нам достаточно сказать внутреннему блоку, чтобы он вел себя как inline-элемент. В нашем случае, добавим внутреннему блоку свойство display:inline-block
Далее, многие начинающие верстальщики не совсем понимают как работает display:inline-block вместе со свойством vertical-align. Если мы просто добавим это свойство к нашему внутреннему элементу - мы не получим никакого эффекта:
Дело в том, что свойство vertical-align умеет выравнивать элементы относительно друг друга. Другими словами, если у нас всего один элемент внутри контейнера - свойство не знает относительно чего его выравнивать.
Давайте поможем свойству сработать и добавим второй элемент внутрь контейнера, однако, сделаем это хитро - новый блок будет невидимым, и не добавит html-кода в наш пример. В этом помогут опять таки любимые :before/:after.
Мы добавили дополнительный элемент в наш контейнер при помощи псевдоэлемента:
.container:after {content:'';display:inline-block;vertical-align:middle; height:100%;}