How does line-height vertically center text?

Question

I\'m trying to understand why the line-height CSS property places the text vertically in the middle of this button:

Answer 1

The line-height property is essentially setting a 29px (29 + 29 = 58) text line above and below your text, "Complete Order". If you added another line of text below this you will find it 58px below this text. You are putting line-height here only to center your text in the middle.

Here is a good slide show to help you understand this concept more... line-height

And here is an example using your code of what I am talking about: http://jsfiddle.net/YawDF/14/

By setting the line-height to 58px you are telling the browser to leave half this above and below the text line, creating a '58px' gap between each line and only a '29px' gap above the first line.

SIDE NOTE: Your use of vertical-align: middle is useless in the code you are showing. This can be taken out all together.