3 строки CSS для выравнивания по вертикали

3 строки CSS для выравнивания по вертикали

От автора: С помощью всего трех строк CSS (исключая вендорные префиксы) и transform: translateY можно выровнять по вертикали все, что угодно, даже не зная высоты элемента. Из этой статьи вы узнаете, как выровнять по вертикали что угодно с помощью трех строк CSS.

Свойство CSS transform обычно применяется для поворота и масштабирования элементов, но с помощью его функции translate можно выравнивать элементы по вертикали. Обычно это делается абсолютным позиционированием или путем установления высоты строки, но при этом от вас требуется знать высоту элемента, либо это срабатывает лишь с текстом, состоящим из одной строки, и т.д.

Итак, пишем:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вот и все, что нужно. Этот способ очень похож на метод абсолютного позиционирования absolute-position, но с тем преимуществом, что не нужно устанавливать ни элементу высоту, ни его родительскому элементу position-property. Этот метод изумительно работает даже в IE9!

Чтобы еще упростить, можно написать все как примесь-миксин с вендорными префиксами:

Или воспользоваться селектором Sass placeholder для уменьшения количества кода в производимом CSS:

Демо-пример находится здесь:

See the Pen Vertical center with only 3 lines of CSS by sebastianekstrom (@sebastianekstrom) on CodePen.

Автор: Sebastian Ekström

Источник: http://zerosixthree.se/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Iryna

    Спасибо, интересный способ, взяла себе на заметку)

  2. Сергей

    А почему про горизонтальное выравнивание забыли упомянуть (?):

    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);

    Да и вообще, все эти префиксы сейчас уже не нужны, достаточно и такого синтаксиса:

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    • Андрей

      Сергей, обратите внимание на дату статьи — 2014 год. Сейчас-то префиксы да, не нужны. Относительно того, что что-то забыли упомянуть, то это переводная статья, в конце статьи указан автор и источник. Поэтому тут скорее автору вопрос :)

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