Как выровнять текст вертикально по центру в CSS

· CSS и Снипеты · 2 мин чтения

В этой статье я предложу несколько вариантов решения данной проблемы, а вы уже для себя сами решите — что подойдет, а что нет.

Чтобы выровнять текст по центру блока в css или какого-либо контейнера нужно использовать свойство vertical-align, но не только его и под каждый случай используются отдельные свойства.

Первый вариант

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* для визуального эффекта */
#column-content {
  border: 1px solid red;
  position: relative;
}
<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    другой текст, который должен быть вертикально центрирован</span>
</div>

Второй вариант

Если у вас одна строчка, то можно использовать это:

<div>Вертикально центрированый текст</div>
div
{
  height: 200px;
  line-height: 200px; 
  vertical-align: middle;
}

Если больше чем одна, то это:

<div><span>Вертикально центрированый текст</span></div>

Демо

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; 
}

Демо

Третий вариант

<div style="display: table; height: 400px; overflow: hidden;">
   <div style="display: table-cell; vertical-align: middle;">
     <div>
       everything is vertically centered in modern IE8+ and others.
     </div>
   </div>
 </div>

Для более старых браузеров — IE6/7. # — используется как хак для работы старых браузеров.

<div style="display: table; height: 400px; overflow: hidden;">
   <div style="display: table-cell; vertical-align: middle;">
     <div>
       everything is vertically centered in modern IE8+ and others.
     </div>
   </div>
 </div>