CSS вертикальное выравнивание для всех

Выравнивание текста по вертикали в CSS — весьма непростая работа. Я видел достаточно людей, борющихся с данным, и постоянно обнаруживаю “критические” ошибки, когда дело доходит до реального адаптивного дизайна.

Но не бойтесь: если вы боретесь с CSS вертикальным выравниванием — вы обратились по адресу.

Поговорим о свойстве CSS vertical align

Когда я только начинал работать в области веб-разработки, то помучился с данным свойством. Я думал, что оно должно работать, как классическое свойство “text-align”. Ах, если бы все было так просто…

CSS свойство vertical-align хорошо работает с таблицами, но не с div или иными элементами. Когда вы используете его для div, то оно выравнивает элемент относительно иных блоков, но не его содержимое. При этом свойство работает только с display: inline-block;.

Посмотрите пример

Мы хотим центрировать контент, а не сам div!

У вас есть два выхода. Если у вас только элементы div с текстом, то можно использовать свойство line-height. Это означает, что необходимо знать высоту элемента, но нельзя ее устанавливать. Таким образом, текст будет в центре.

Правда у этого подхода CSS выравнивания по вертикали есть недостаток. Если текст многострочный, тогда высота строки будет умножена на число строк. Скорее всего, в этом случае, у вас получится ужасно сверстанная страница.

Взгляните на этот пример

Если содержимое, который вы хотели бы центрировать, состоит больше, чем из одной строки, тогда лучше использовать табличные div. Также можно использовать таблицы, но семантически это не правильно. Если вам нужны разрывы для адаптивных целей, лучше использовать элементы div.

Чтобы это работало, должен быть родительский контейнер с display: table, а внутри него – нужное число столбцов, которое вы хотели бы центрировать при помощи display: table-cell и vertical-align: middle.

Посмотрите пример

Почему это работает с табличной разметкой, но не с элементами div? Так как у строк в таблице одинаковая высота. Когда содержимое ячейки таблицы не использует все доступное пространство по высоте, браузер автоматически добавляет вертикальные отступы, чтобы центрировать содержимое.

Свойство position

Начнем с основ выравнивания по вертикали CSS div:

  • position: static — это значение по умолчанию. Элемент выводится в соответствии с порядком HTML;
  • position: absolute — используется, чтобы определить точное положение элемента. Эта позиция связана с ближайшим относительно позиционированным родительским элементом(не static). Если не определить точное положение элемента, вы потеряете контроль над ним. Он отобразится случайно, в полном объеме игнорируя поток документа. По умолчанию элемент выводится в левом верхнем углу;
  • position: relative — используется для позиционирования элемента относительно его нормального положения(статического). Это значение сохраняет порядок потока документа;
  • position: fixed — используется для позиционирования элемента относительно окна браузера, так что он выводится в области просмотра.

Примечание: некоторые свойства( top и z-index) работают только в том случае, если для элемента задано значение position(не static).

Давайте приступим к делу!

Вы хотели бы осуществить CSS выравнивание по центру по вертикали? Сначала создайте элемент с относительной позицией и размерами. Например: 100% по ширине и высоте.

Второй шаг может быть разным в зависимости от целевых браузеров, но можно использовать один из двух вариантов:

  • Старое свойство: необходимо знать точный размер окна, чтобы удалить половину ширины и половину высоты. Посмотрите пример;
  • Новое свойство CSS3: можно без проблем добавить свойство transform со значением translate 50% и блок будет в центре. Посмотреть пример.

В принципе, если вы планируете центрировать содержимое, никогда не используйте top: 40% или left: 300px. Это прекрасно работает на тестовых экранах, но это не центровка.

Помните position: fixed? Можно без проблем сделать с ним то же самое, что и с абсолютной позицией, но вам не нужна относительная позиция для родительского элемента — она будет позиционировать относительно окна браузера.

Вы слышали о спецификации flexbox?

Можно легко использовать flexbox. Это намного лучше, чем любой другой вариант выравнивания текста по центру CSS по вертикали. С flexbox управление элементами напоминает детскую игру. Проблема состоит в том, что необходимо отбросить некоторые браузеры, такие как IE9 и версии ниже. Вот пример того, как вертикально центрировать блок:

Посмотреть пример

Используя flexbox расположение, можно центрировать пару блоков.

Если вы примените то, что узнали из данных примеров, то сможете легко освоить CSS выравнивание блока по вертикали в кратчайшие сроки.

Ссылки и дополнительная литература

Изучение CSS разметки

FlexBox Froggy

Полное руководство по flexbox

Песочница flexbox

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

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