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

问题:

Eg.

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

Will render with 567 slightly below the surrounding numbers.

http://jsfiddle.net/zBy9D/

回答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.

回答2:

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