简单div内的垂直对齐

Question

This is a very simple question, but after a few hours surfing the web I've realized that probably I'm not getting the concept.

I have:

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

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

This does not center the "My text" vertically. How can I center the text vertically?

Thanks a million

Answer 1

You need to use display: table-cell; to be able to center the text vertically.

Jsfiddle demo.

Answer 2

I would use line-height equal to the height of your div.

line-height: 44px;

NB: this will only work on text in a single line.