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

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

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

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

Итак, пишем:

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

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

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

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align;
}

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

%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @extend %vertical-align;
}

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

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 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

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

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

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

  1. Iryna

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree