Как вертикально центрировать текст с помощью CSS

  1. CSS свойство vertical-align
  2. CSS Flexbox
  3. CSS Table Display
  4. CSS свойство line-height
  5. Равные верхние и нижние отступы
  6. Абсолютное позиционирование и отрицательные поля
  7. Абсолютное позиционирование и растягивание
  8. Свойство Transform
  9. Floater div

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

Используйте свойство vertical-align

Свойство vertical-align используется для вертикального центрирования строчных элементов.

Значения для vertical-align выравнивают элемент относительно родительского элемента.

  • Значения line-relative вертикально выравнивают элемент относительно всей строки.
  • Значения для ячеек таблицы относительны к table-height-algorithm, который обычно указывает на высоту строки.

Не работает со старыми версиями IE. Решением является добавление child {display: inline-block}.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style type="text/css">
      div {
      display: table-cell;
      width: 250px;
      height: 200px;
      padding: 10px;
      border: 3px dashed #1c87c9;
      vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div>Вертикально выровненный текст</div>
  </body>
</html>

Используйте CSS Flexbox

С Flexbox можно выровнять элементы по вертикали или по горизонтали с помощью свойств align-items, align-self, и justify-content.

Читайте наше Руководство Flexbox, чтобы научиться, как создать flexible layout, оптимизированный для разных устройств.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      section { 
      display: flex; 
      width: 50%; 
      height: 200px; 
      margin: auto; 
      border-radius: 10px; 
      border: 3px dashed #1c87c9; 
      } 
      p { 
      margin: auto; /* Important */ 
      text-align: center; 
      }
    </style>
  </head>
  <body>
    <section>
      <p> Центрирован с помощью Flexbox.</p>
    </section>
  </body>
</html>

Используйте CSS display:table

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #parent {
      display: table; 
      width: 100%; 
      height: 200px; 
      border: 3px dashed #1c87c9;
      text-align: center; 
      }
      #child {
      display: table-cell;
      vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">Вертикально центрирован.</div>
    </div>
  </body>
</html>

Не работает со старыми версиями IE. Добавьте child {display: inline-block}.

Используйте свойство line-height

Данный метод может быть использован для вертикального центрирования одной строки текста. Добавьте свойство line-height к элементу, содержащему текст, где высота строки больше, чем размер шрифта. По умолчанию свободное пространство будет распределено равномерно сверху и снизу текста, и получится вертикально центрированный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      height: 90px;
      line-height: 90px;
      text-align: center;
      border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <p>Вертикально центрирован.</p>
  </body>
</html>

Следующий метод работает для одной строки или же нескольких строк текста, но этот метод требует фиксированной высоты контейнера.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div {
      display: inline-block; 
      width: 100%;
      height: 200px;
      vertical-align: middle; 
      line-height: 200px;
      text-align: center; 
      border: 3px dashed #1c87c9;  
      }
    </style>
  </head>
  <body>
    <div>Вертикально центрирован.</div>
  </body>
</html>

Задайте равные верхние и нижние отступы

В этом методе верхние и нижние отступы родительского элемента будут равными

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .center {
      padding: 10% 0;
      border: 3px dashed #1c87c9;
      }
    </style>
  </head>
  <body>
    <div class="center">
      <p>Вертикально центрирован.</p>
    </div>
  </body>
</html>

Если нужно задать отступы, используйте %. Данный метод требует некоторые вычисления, чтобы понять, какие значения необходимо установить для top и bottom для их динамического роста. Если установить относительную высоту, вычисления не потребуются.

Задайте абсолютное позиционирование и отрицательные поля

Этот метод используется с блочными элементами. Не забудьте установить высоту элемента, которую хотите центрировать.

  1. Задайте #parent {position: relative} и #child {position: absolute;}
  2. Задайте top: 50%; и left: 50%; для центрирования левого края child <div>.
  3. Задайте child <div> {width:} и {height:} таким образом, чтобы он перемещался вверх и налево.
  4. Установите отрицательное поле, оно уменьшает наполовину высоту и толщину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .parent {
      position: relative;
      width: 100%;
      height: 220px;
      background: #1faadb;
      color: #fff;
      }
      .child_1, .child_2 {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 110px;
      height: 70px;
      background: #8ebf42;
      text-align: center;
      }
      .child_1 {
      margin: -35px 0 0 -55px;  
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child_1">Вертикально центрированный текст.</div>
    </div>
    </br>
    <div class="parent">
      <div class="child_2">Нецентрированный текст.</div>
    </div>
  </body>
</html>

Если контент становится больше контейнера, он визуально исчезнет.

Задайте абсолютное позиционирование и растягивание

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

  1. Задайте parent {position: relative} и child {position: absolute;}
  2. Задайте child {top: 0; bottom: 0; left:0; right:0;}
  3. Задайте 4 margin: auto; все поля станут равными и child <div> станет центрированным по вертикали, а также по горизонтали.

Пример

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 30%;
  margin: -15% 0 0 -25%;
 }

Данный метод не работает в IE7.

Задайте свойство transform

Если мы имеем position: absolute; left: 50%; top: 50%;, вычисления делаются с левого верхнего угла. Для центрированного позиционирования текста необходимо переместить текст на -50% налево и на 50% вверх с помощью transform: translate (-50%;-50%).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .parent {
        position: relative;
        width: 100%;
        height: 220px;
        background: #1faadb;
        color: #fff;
      }
      .child_1, .child_2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 90px;
        height: 90px;
        padding: 5px;
        background: #8ebf42;
        text-align: center;
      }
      .child_1 {
        transform: translate(-50%, -50%);  
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child_1">Вертикально центрированный текст.</div>
    </div>
    </br>
    <div class="parent">
      <div class="child_2">Нецентрированный текст.</div>
    </div>
  </body>
</html>

Используйте floater div

Этот метод требует пустой div, который будет floated.

Этот метод требует пустой div.

  1. Float: floater <div> слева или справа.
  2. Задайте Height: 50%;
  3. Пустой дочерний элемент.
  4. Очистите child <div>, используя clear: property.

Необходимо выставить дочерний элемент на расстоянии, равной половину высоты. Для этого нужно задать отрицательные значения свойства margin-bottom: на floater <div>

Пример

#parent {
  height: 200px;
}
#floater {
  float: left;
  width: 100%;
  height: 50%;
  margin-bottom: -50px;
  outline: 2px solid #1c87c9;
}
#child {
  clear: both;
  height:100px;
  outline: 2px solid #8ebf42;
}

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


Похожие ресурсы

    Считаете ли это полезным?

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