Why Does "vertical-align: Middle" Push Text Below Surrounding Text?

Eg. 1234567890 Will render with 567 slightly below the surrounding numbers. http://jsfiddle.net/zBy9D/

Solution 1:

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.

Solution 2:

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