Выравнивание по вертикали c помощью CSS

Вертикальное выравнивание CSS — не самая простая задача. Осложняет дело и то, что с сегодняшними требованиями к адаптивному дизайну для различных устройств разработчикам приходится создавать элементы с «гибкой» высотой, и вычисление центра по вертикали становится довольно хитрой задачей.

В данной статье мы рассмотрим:

  • свойство vertical-align, как и когда оно работает;
  • способ центрирования по вертикали элемента с известной высотой;
  • центрирование по вертикали элементов с изменяемой высотой.

Vertical-align

Свойство vertical-align влияет только на элементы, у которых свойство display имеет в себя значения inline, inline-block или table-cell. Оно принимает в виде значений число, проценты или ключевое слово.

Длина и проценты выравнивают базовую линию элемента на соответствующем расстоянии от базовой линии родительского элемента.

Ключевые значения vertical-align могут быть следующими:

  • baseline;
  • sub;
  • super;
  • text-top;
  • text-bottom;
  • middle;
  • top;
  • bottom.

Большинство из них не требует дополнительного объяснения. Следует отметить только sub и super, которые выводят элемент как подстрочный и надстрочный, не изменяя при этом размер шрифта.

Рассмотрим наглядный пример вертикального выравнивания текста CSS при помощи vertical-align. У нас есть сетка с картинками и текстом — все они различной высоты, так что не везде текст выравнивается красиво:

<div class="grid"> <img src="http://placebacn.com/200/400"> <h2>grilled bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/300"> <h2>tasty bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/200"> <h2>crispy bacon</h2> </div> <div class="grid"> <img src="http://placebacn.com/200/350"> <h2>bacon</h2> </div>

Чтобы всё аккуратно выровнять, можно без проблем задать контейнерам сетки свойство display: inline-block и использовать для картинок свойство vertical-align: bottom. Если бы в нашем примере не было текста, можно было бы использовать vertical-align: middle и без проблем добиться нужного результата.

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

В примере, приведенном ниже, у нас есть div с чёрным фоном и рамкой. Внутри него находится блок поменьше с нужной нам шириной и высотой:

<div class="container"> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt dolores, consequatur dolorem, dignissimos debitis distinctio. Voluptas eligendi fuga voluptatem eos. </div></div>

Если мы знаем высоту блока, можно использовать абсолютное позиционирование, чтобы осуществить CSS вертикальное выравнивание по центру.

Применив к контейнеру свойство position: relative, можно задать абсолютное позиционирование внутреннему блоку. Если присвоить свойствам top и left значение 50%, блок сдвинется на 50% от верхнего и левого краёв. Верхний левый угол блока окажется точно в центре контейнера:

.container { position: relative; background: #444;}.box { position: absolute; top: 50%; left: 50%; width: 400px;  height: 200px;  margin: -100px 0 0 -200px;  color: #fff;  background: #cc3f85;}

Наш блок имеет в себя заданные ширину и высоту, так что можно легко установить для него отрицательные отступы — на половину высоты вверх и половину ширины влево. Наш блок сейчас размещён в центре контейнера.

Этот приём CSS вертикального выравнивания блока работает, но его недостаток заключается в неизменяемой ширине элементов. Так что он будет далеко не лучшим решением для работы над адаптивным дизайном.

Адаптивное центрирование по вертикали

Fluid vertical center

Отличные результаты для центрирования по вертикали элементов с изменяемой высотой можно приобрести, объединив vertical-align: middle с псевдоэлементами. Возьмём тот же пример с блоком внутри контейнера, но в этот раз блок будет иметь изменяемую высоту.

Главный приём здесь — создать невидимый элемент(используя псевдоэлемент), который будет заполнять контейнер по высоте, и установить свойства display: inline-block и vertical-align:middle. После этого необходимо выровнять внутренний блок, также установив ему свойства display: inline-block и vertical-align: center. Далее центрировать блок по горизонтали, используя text-align: center:

.container {  height: 400px;  margin: 20px;  background: #444;  font-size: 0;  text-align: center;}.container:before {  content: '';  display: inline-block;  height: 100%;   vertical-align: middle;}.box {  display: inline-block;  width: 50%;  padding: 2em;  border: 1px solid #000;  background: #cc3f85;  font-size: 1rem;  vertical-align: middle;}

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

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

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