为什么“垂直对齐:居中"?将文字推到周围的文字下方? [英] Why does "vertical-align: middle" push text below surrounding text?

问题描述

例如

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

将使用 567 稍低于周围数字进行渲染.

Will render with 567 slightly below the surrounding numbers.

http://jsfiddle.net/zBy9D/

推荐答案

默认情况下，元素的 vertical-align 为 baseline .

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

关于 middle 为什么低于 baseline 的原因，MDN表示以下内容:

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

中间

将元素的中间与小写字母的中间对齐父母中的字母.

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.

这篇关于为什么“垂直对齐:居中"?将文字推到周围的文字下方?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！