Вертикальное выравнивание элементов средствами CSS

Вертикальное выравнивание элементов средствами CSS

Nikel, 07.05.2014

Выравнивание методом Flexible Box Model

Первый из рассматриваемых способов самый прогрессивный. Он носит название Модель Гибкого Поля (Flexible Box Model) и при всех своих преимуществах имеет и существенный недостаток: плохую поддержку браузерами. Я уже писала об этом методе в статьях, например, в этой, посвященной резиновому горизонтальному меню.

Чтобы включить новый «механизм», нужно всего лишь указать родительскому блоку свойство display:box. Для лучшей совместимости его обычно дублируют свойствами с соответствующими префиксами -moz, -webkit и т.п. Еще родителю присваивается параметр box-align, выравнивающий элементы внутри него. Поскольку в приведенном коде box-orient: horizontal (блоки выводятся горизонтально), box-align:center будет отвечать за вертикальное центрирование.

Демонстрационный пример

Выравнивание методом display: table-cell

Наверное, самый лучший из представленных методов: современный, красивый, простой. Позволяет отказаться от несемантичного использования таблиц ( применяя тег table исключительно для табличных данных) и использовать подходящие элементы с расширенной функциональностью. Вы просто заставляете их вести себя как таблица (display:table) или ячейка таблицы (display:table-cell).

Вообще достаточно использовать только table-cell,  браузер сам достроит анонимные части таблицы, которые вы не указали (table, tr и т.д).

Далее приведен код практического примера.

Задаем для блока класса .tab тип отображения таблица, чтобы растянуть таблицу на всю ширину.

Можно его не использовать, но в этом случае, если в блоке с типом отображения ячейка таблицы (в нашем примере блок класса .el) мало содержимого, таблица будет занимать не все доступное пространство, а подстраиваться под ширину контента

Итак, для центрирования  в блоке .el, указываем свойство vertical-align:middle;. В приведенном коде выравнивается блок .cont, вместо него можно использовать простой текст, он также будет выравнен.

Разумеется, метод позволяет также расположить элемент/текст вверху или внизу «ячейки».

Недостаток: не поддерживается IE7.

Демонстрационный пример

Использование элементов inline-block

Какой элемент помимо table «подчиняется» свойствам для вертикального выравнивания?

Конечно же это строчные элементы и элементы inline-block, используем возможности последних для решения поставленной задачи.

В отличие от таблицы, блочно-строчные элементы по другому «понимают» свойство vertical-align —  не выравнивают содержащийся в них дочерний элемент, а сами выравниваются.

В приведенном ниже примере используются два блочно-строчных элемента. Один из них, генерируемый с помощью элемента :before,служит для «технических» целей: заставить второй элемент центрироваться по вертикали( чтобы этого достичь его высота равна 100% от родительской и задано выравнивание по вертикали по центру).

Демонстрационный пример

Стили для IE 7

Код не работает в IE 7, так как данный морально устаревший браузер не поддерживает псевдоэлемент :before и display:inline-block

Применяем для него специальные стили и заключаем в специальные комментарии.

Использование родительского элемента фиксированной высоты

По подобному принципу строится и выравнивание блочно-строчного элемента в контейнере фиксированной высоты.

Для контейнера с классом .parent задается высота строки равная его высоте, поэтому когда мы указываем vertical-align:middle для дочернего элемента он выравнивается в соответствии со строкой родителя посередине.  В классе .child переопределяется line-height на нормальное значение, чтобы элемент-дочка не унаследовал огромную высоту строки родителя, тогда между его строками будут гигантские промежутки.

Демонстрационный пример

Лекарство для IE7

Internet Explorer 7 некорректно работает при использовании этого метода, поэтому как всегда обходной путь — expression, вставляющий дополнительный тег .before с типом отображения inline.

Использование позиционирования

Старый проверенный вариант решения, который годится для дочерних элементов, примерная высота которых известна. Родитель позиционируется относительно и становится контейнером, в котором абсолютно позиционируется «ребенок». Элемент смещается вниз на 50%, а затем отрицательный внешний отступ сдвигает его вверх на половину его высоты, чтобы середины позиционированных блоков совпали. Все предельно просто.

выравнивание по вертикали

Демонстрационный пример

Вот и все на сегодня! Таким образом можно выравнивать не только блоки, но и обычный текст, картинки.

1 комментарий


    • Виктор
      Cancel Replay
    • Ноябрь 5, 2014

    Здравствуйте. Хочу предложить Вам обменяться кнопками/ссылками с моим сервисом http://www.favicon-generator.ru/. Вашу ссылку я могу разместить в разделе категории Партнёров. В замен прошу разместить ссылку/кнопку (88x31) на сайт нашего партнёра доменного регистратора http://uanic.name/ . Как Вы на это смотрите?