Вертикальное и горизонтальное центрирование с помощью CSS Flexbox

В вопросе о горизонтальном центрировании нет ничего особенного, вы делали это множество раз. Но как насчет вертикального центрирования контента? В этом уроке вы узнаете, как Flexbox решает эту проблему с минимальными усилиями.

Для начала перейдите на страницу проекта CodePen и нажмите на кнопку "Fork", для открытия нового окна с копией проекта. Здесь мы будем вносить наши изменения.

See the Pen Flexbox Project 3: Banner With Centered Content ii by Envato Tuts+ (@tutsplus) on CodePen.

Для начала взглянем на HTML разметку.


  <div class="banner">
    <div class="banner-text">
      <h1>Flexbox Banner</h1>
      <h3>Perfectly Centered</h3>
      <h6>No matter how many lines of text you use.</h6>
    </div>
  </div>

Здесь содержится контейнер banner, внутри которого есть еще один контейнер с классом banner-text. Затем идут заголовки h1, h3 и h6.

В CSS для класса banner мы установили белый цвет текста, задали его размер и определили высоту в 300px. А также добавили стили для вложенных заголовков.

.banner {
  color: white;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/409269/banner-flowers.jpg') top left/cover no-repeat;
  height: 300px;
}

.banner h1, .banner h3, .banner h6 {
  margin: 0;
  text-shadow: 2px 2px 6px #000;
  text-align: center;
}

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

Старый способ центрирования текста

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

Горизонтальное выравнивание текста очень легко реализовать. Мы могли бы просто обратиться к заголовкам h1, h3 и h6, внутри контейнера banner и просто добавить свойство text-align: center.

Но с вертикальным выравниванием все намного сложнее.

Если бы вы хотели выровнять всего одну строчку текста по вертикали, вы могли бы задать высоту строки. Так как наш контейнер banner имеет высоту 300px, следовательно для вертикального выравнивания одной строки текста нам нужно установить свойство line-height: 300px.

Но что если у вас есть несколько строк текста? Что делать если у вас есть абзац текста? Что делать если вы хотите вертикально выровнять блок с текстом и изображениями?

Я бы создал новое правило для .banner-text для которого задал свойство padding-top с таким значением, пока текст не станет строго по центру. Но что если размер родительского блока изменится, например просматривая на устройстве с меньшим размером экрана, тогда придется создавать медиа-запросы под различные размеры экранов и подгонять верхний отступ под них. Довольно сложно не так ли?

Центрирование текста с помощью Flexbox

Flexbox позволяет центрировать наш текст по вертикали гораздо легче и точнее, чем старым способом.

Когда мы используем модель Flexbox, нам даже не нужно задавать отдельное правило для контейнера .banner-text. Все, что нам нужно сделать, установить свойство display: flex для основного контейнера .banner.

После этого для контейнера .banner-text добавим свойство justify-content: center для горизонтального центрирования его контента.

Для вертикального выравнивания необходимо всего лишь добавить одно свойство align-items: center для контейнера .banner-text.

Также у данного свойства существуют другие значения: flex-start - элемент будет располагаться в верху flex контейнера, flex-end - элемент будет располагаться в верху flex контейнера.

Перевод статьи How to Create Perfectly Centered Text With Flexbox

Тэги: flexbox

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.