Выровнять текст по вертикали

Ответ 1

Создайте контейнер для вашего текстового содержимого, возможно < <20 > .

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

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}

<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

Ответ 2

Андрес Ильич имеет это право. На всякий случай, если кто-то пропустит его комментарий...

A.) Если у вас есть только одна строка текста:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
}

<div>vertically centered text</div>

Ответ 3

Обновление 10 апреля 2016 г.

Флексбоксы теперь должны использоваться для выравнивания элементов по вертикали (или даже по горизонтали).

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

Хорошее руководство по flexbox можно прочитать на CSS Tricks. Спасибо Бен (из комментариев) за указание на это. У меня не было времени, чтобы обновить.

Хороший парень по имени Махендра отправил очень работающее решение здесь.

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

.absolute-center {

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}

Ответ 4

Принятый ответ не работает для многострочного текста.

Я обновил JSfiddle для отображения вертикального выравнивания многострочного текста CSS, как описано здесь:

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

Он также работает с <br/> в "еще одном..."

Ответ 5

Попробуйте следующее:

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

Ответ 6

Чтобы сделать решение Omar (или Mahendra) еще более универсальным, блок кода относительно Firefox должен быть заменен следующим:

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

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

position: relative; или position:static; (не с положением: абсолютное или фиксированное).

А потом маржа: авто; или поле справа-справа: авто; поле слева: авто;

Под этой средой выравнивания по центру коробки предложение Омара не работает. Это не работает ни в Internet Explorer 8 (пока 7,7% доли рынка). Таким образом, для Internet Explorer 8 (и других браузеров) следует рассмотреть обходной путь, который рассматривается в других вышеупомянутых решениях.

Ответ 7

Это просто должно работать:

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

Я попробовал это на вашем демо.

Ответ 8

Это самый простой способ сделать это, если вам нужно несколько строк. Заверните вы span "d текста в другой span и указать его высоту с line-height. Трюк с несколькими строками сбрасывает line-height внутреннего span.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
    line-height: /* Set height */;
}

.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /* Set line height back to normal */
}

DEMO

Конечно, внешний span может быть div или что-то еще.

Ответ 9

Добавьте выравнивание по вертикали в CSS content #column-content strong тоже сильно:

#column-content strong {
    ...
    vertical-align: middle;
}

Также смотрите ваш обновленный пример.

=== ОБНОВЛЕНИЕ ===

С пролетом вокруг другого текста и другим вертикальным выравниванием:

HTML:

... <span>yet another text content that should be centered vertically</span> ...

CSS:

#column-content span {
    vertical-align: middle;
}

Также см. Следующий пример.

Ответ 10

Я знаю, что это совершенно глупо, и вы обычно не должны использовать таблицы, когда не создаете таблицы, но:

Ячейки таблицы могут выравнивать несколько строк текста по центру и даже делать это по умолчанию. Таким образом, решение, которое работает вполне нормально, может быть примерно таким:

HTML:

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

CSS (сделать элемент таблицы всегда подходящим для блока div):

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

Смотрите здесь: http://www.cssdesk.com/LzpeV