Вертикальное выравнивание внутри простого div

Question

Это очень простой вопрос, но после нескольких часов веб-серфинга я понял, что, вероятно, я не понимаю концепции.

У меня есть:

<style>
 #more{width:190px; height:44px; border:1px solid #CCCCCC; padding-bottom:3px;vertical-align:middle;}
</style>

 <div id='more'> My text </div>

Это не центрирует "Мой текст" по вертикали. Как я могу центрировать текст по вертикали?

Спасибо за миллион

Answer 1

Я бы использовал line-height, равный высоте вашего div.

line-height: 44px;

Примечание: это будет работать только с текстом в одной строке.

Answer 2

Вам нужно использовать display: table-cell;, чтобы иметь возможность центрировать текст по вертикали.

Jsfiddle демо.