Возможно ли вертикальное выравнивание текста внутри div?

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

 #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; } 

 
  1234 yet another text content that should be centered vertically  

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

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

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

 
vertically centered text 

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

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

 
 
Item
 
Item
 
Item
 
Item
 
  

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

Хороший парень по имени Mahendra опубликовал очень рабочее решение здесь

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

 .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; } 

Это старый stream, но принятый ответ не работает для многострочного текста, и это лучший результат в google. Я обновил jsfiddle, чтобы показать css многострочный вертикальный вертикальный текст текста, как описано здесь.

 
 
yet another text content that should be centered vertically
 
 #column-content { border: 1px solid red; height: 200px; width: 100px; } div { display: table-cell; vertical-align:middle; text-align: center; } 

он также работает с
в «еще одном …»

Попробуй это:

HTML

 
Text 

CSS

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

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

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

Пробовал это на вашей демонстрации.

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

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

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

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

а затем margin: auto; или margin-right: auto; Маржа налево: авто;

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

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

 YOUR TEXT HERE 

 .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 или whathaveyou

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

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

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

=== UPDATE ===

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

HTML:

 ... yet another text content that should be centered vertically ... 

CSS:

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

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

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

HTML:

 
 
 
 
lorem ipsum ...
 
 
  

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

 .box { /* for example */ height: 300px; } .textalignmiddle { width: 100%; height: 100%; } 

см. здесь: http://www.cssdesk.com/LzpeV