Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

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

7346_4373

Выравнивание методом 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%, а затем отрицательный внешний отступ сдвигает его вверх на половину его высоты, чтобы середины позиционированных блоков совпали. Все предельно просто.

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

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

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

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

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

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

*