vertical-align超级详细简单易懂
行内级元素垂直对齐方式
必知的概念
中线、基线、顶线、底线
中线（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 的对齐方式有点特别，不过实战中几乎不用。
对齐实战
本文章转载于imweb,原文地址为：行内级元素垂直对齐方式