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 text you generate is inside its own line box and vertical-align is used for placement inside that box. However, that box has nothing to do with the div you have wrapped around the text. You set the height of the div to 58px but that does not affect the height of the line text box. That is why you need line-height to match the height of the div.