Как центрировать текст по вертикали?

Question

[kappka]

Здравствуйте.

У меня есть блоки такого вида:

Как можно центрировать заголовок по вертикали? Т.е. чтобы он спускался ниже, когда умещается в одну строку текста (показал стрелками)

Структура блока:

<div class="item col-lg-4 col-md-4 col-sm-4">
	<a href="#">
		<img alt="" src="img/cat_4.png">
		<h3> Заголовок </h3>
	</a>
	<div class="buttons">
		<a class="like" href="#"><i class="icon-like"></i><span class="count">178</span></a>
		<a class="dislike" href="#"><i class="icon-dislike"></i><span class="count">178</span></a>
		<a class="comment" href="#"><i class="icon-comment"></i><span class="count">178</span></a>
	</div>
</div>

Пытался через table, но всё рушится, идей нет.
Заранее спасибо!

Answer 1

[Сергей]

Попробуйте так

a{
display: table;
}
img{
display: table-cell;
}
.h3{
display: table-cell;
vertical-align: middle;
min-height: 60px;
}

Comments

[kappka]

Вроде работает, но h3 в этом случае находится справа от изображения

Answer 2

[Евгений Конкин]

Попробуй так!
Обернуть заголовок в div, задать div определённую высоту и применить vertical-align: middle

Comments

[kappka]

Сделал точно так как вы сказали. Не работает.

[Евгений Конкин]

kappka: вот это точно должно работать, но про старые браузеры ничего сказать не могу
У div убери alignment и примени код к h3

position: absolute;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

Answer 3

[Natalia Baženova]

Если вопрос о поддержке старых браузеров не стоит, то flexbox
Нужно немножко вникнуть, но оно того стоит.