行内级元素垂直对齐方式

必知的概念

中线、基线、顶线、底线

中线(middle)、基线(baseline)、顶线(text-top、底线(text-bottom))是文本的几个基本线,其对应位置如下图:

vertical-align 取值

vertical-align 只接受8个关键字、一个百分数值或者一个长度值。下面我们将看看各关键字如何作用于行内元素。

默认的对齐方式为baseline,一般使用最多的就是middle,偶尔你还会看到使用像素来偏移。注意 text-top 及text-bottom 的对齐方式有点特别,不过实战中几乎不用。

对齐实战

baseline (默认对齐): 小写字母x的最底线

Xx 中文 Xx gf 中文

middle: 小写字母x的中线

Xx 中文 Xx gf 中文

text-top:行盒 font-size 大小所组成的内容区域顶部

行内盒 “gf” 的 font-size 大小(继承自父元素)与行盒的 font-size 大小一样,所以其内容区域与行盒 font-size 大小所组成的内容区域一样。

Xx 中文 Xx gf 中文

text-bottom:行盒 font-size 大小所组成内容区域的底部

Xx 中文 Xx gf 中文

top:行盒的最高线

Xx 中文 Xx gf 中文

bottom:行盒的最低线

Xx 中文 Xx gf 中文

length / %:按照字母x的基线(baseline)偏移设置的数值

Xx 中文 Xx gf 中文

sub / super:分别对齐 sub 标签 和 sup 标签的 baseline

Xx 中文 Xx sub gf sup 中文