行内级元素垂直对齐方式

必知的概念

中线、基线、顶线、底线

中线（middle）、基线（baseline）、顶线（text-top、底线（text-bottom））是文本的几个基本线，其对应位置如下图：

• 基线（base line）：小写英文字母`x`的下端沿。
• 中线（middle line）：小写英文字母`x`的中间。
• 顶线（text-top）：父元素 font-size 大小所组成的一个内容区域的顶部
• 底线（text-bottom）：父元素 font-size 大小所组成的一个内容区域的底部

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 中文