Why does “vertical-align: middle” push text below

Question

Eg.

1234<span style="vertical-align: middle">567</span>890

Will render with 567 slightly below the surrounding numbers.

http://jsfiddle.net/zBy9D/

Answer 1

It's because text has, by default, vertical-align: baseline. Middle's slightly lower than baseline.

Answer 2

As mentioned by others, elements have a vertical-align of baseline by default.

In regards to why middle is lower than baseline, MDN says the following:

middle

Aligns the middle of the element with the middle of lowercase letters in the parent.

Since the height of the font text is greater than that of lowercase letters, the text becomes slightly lower.