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.
line-height
is a rule for appearance editing, not necessarily for vertically aligning within a button. He is asking why this technique of centering text inside a button works.