中线(middle)、基线(baseline)、顶线(text-top、底线(text-bottom))是文本的几个基本线,其对应位置如下图:
vertical-align 只接受8个关键字、一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。
默认的对齐方式为baseline,一般使用最多的就是middle,偶尔你还会看到使用像素来偏移。注意 text-top 及text-bottom 的对齐方式有点特别,不过实战中几乎不用。
Xx 中文 Xx
gf
中文
Xx 中文 Xx
gf
中文
行内盒 “gf” 的 font-size 大小(继承自父元素)与行盒的 font-size 大小一样,所以其内容区域与行盒 font-size 大小所组成的内容区域一样。
Xx 中文 Xx
gf
中文
Xx 中文 Xx
gf
中文
Xx 中文 Xx
gf
中文
Xx 中文 Xx
gf
中文
Xx 中文 Xx
gf
中文
Xx 中文 Xx
sub
gf
sup
中文