Skip to main content
Темплейты для Drupal
Вертикальное выравнивание любых элементов (текст, текстовый блок, изображение и т.д.) внутри родительского элемента средствами CSS3 и Sass. Кроссбраузерно, просто, минимум кода.

Вертикальное выравнивания в DIV (CSS и SASS)

Каждый, кто когда-нибудь занимался версткой знает, что выравнивание по вертикали элементов в DIV - не меньше, чем головная боль. Как только не решают эту задачу... Но на каждый болт есть своя гайка.

СSS - вертикальное выравнивание в DIV

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

SASS Вертикальное выравнивание в DIV

Для простоты использования в Sass делаем mixin один раз и используем одной строкой везде, где требуется:

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* Usage */
.wrapper p {
  @include vertical-align();
}

В некоторых случаях этот метод может привести к размытию в "пол-пикселя", фиксим:

.div-parent {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Вот так все просто :)

0

Comments