В этой статье я предложу несколько вариантов решения данной проблемы, а вы уже для себя сами решите — что подойдет, а что нет.
Чтобы выровнять текст по центру блока в 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>