vertical-align这个属性，我知道的有三个用途，其中两个好理解，兼容性也比较好，第三个差一些。
- 垂直文本对齐
- 实现上下标
- 行内元素垂直对齐
- 垂直文本对齐
-
<td>
可以在表格单元格内进行文本垂直对齐的设置，参考这里。
常用的：vertical-align:top、middle、bottom -
dispaly:table-cell
将元素的display属性设置为table-cell就可以参照上面一样，对元素内的文本进行垂直对齐啦。
p{
height:100px;
width: 100px;
background: yellow;
display: table-cell;
vertical-align: middle;
text-align: center;
} -
实现上下标
设置方法：vertical-align:sub、supper
#p1{
font-size: 0.7rem;
vertical-align: super;}
#p2{
font-size: 0.7rem;
vertical-align: sub;}
<p >X<span id="p1">2</span>ABC</p>
<p >X<span id="p2">2</span>ABC</p>
效果
为了方便看，我将<p>设置了浮动。
由于vertical-align是设置行内元素垂直对齐，所以该属性应该作用于行内元素上。 -
行内元素垂直对齐
【观察默认】
p{
height:100px;
line-height: 100px;
width: 300px;
background: yellow;
text-align: center;
}
<p><img src="bac1.jpg"/><span>HELLO</span></p>
vertical-align：baseline（默认）
参考线
上图是默认的对齐方式：
在<p>内加入行内元素<img>
利用元素高度等于行高，进行文本居中，这就说名此时黄色背景区域里只是一行文本。
发现img这里行内元素，并没有进行文本居中，首先他不是文本，其次他的对齐方式，是参照已经文本对齐的HELLO的基线对齐。
再看多行文本下,取消了行高设置，对span元素进行了背景加蓝，方便观看。
多行效果
【需要知道】
行内文本元素，会继承其父元素的行高。导致行内文本元素的高度被扩高。所以设计界面时别忘记这一点，导致忽略行内元素的真实行高。
【测试未设置行高】
在未设置行高的情况下，行内元素的真实高度即为图中蓝色背景区域。 -
vertical-align: bottom
img{vertical-align: bottom; //与行内最低元素底部对齐}
span{background: blue; }
效果：对齐的是底部不是基线 -
vertical-align: top
img{vertical-align: top; //与行内最高元素顶部对齐}
span{background: blue; }
效果：对齐顶部 -
vertical-align: middle
img{vertical-align: middle; //使图片位于该行的垂直中间}
span{background: blue; }
效果，图片居中
乍一看，图片没有变化，反倒文本变了，对于top、bottom、baseline，是设置行内元素垂直对齐，但是middle是设置自身相对所在行居中，但是该行最高的元素就是图片，所以图片本身就是居中，而文本则恢复默认的对于基线对齐。
这时，同时对span这个蓝色背景的文字设置span{vertical-align: middle; }发现蓝色背景的图片也居中了。
效果
【测试设置行高】
这时候行内文本元素集成行高，其高度充斥这一行。
p{line-hight:30px;}
多了15px？
因为图片本身有35px，由于默认时，对齐基线，图片为了对齐基线，由于自身又太高，就扩高了高度。再加上内部span继承了行高，观察文本下面有留白，即是设置完行高后，上下腾出的留白。 -
vertical-align:top
img{vertical-align: top; }
效果
行内最高元素当然是继承了行高后行内文本么，怎么看上去，并没有使得大家顶部对齐啊？
其实已经对齐了，因为文字上的留白，是由于行高设置的原因，还有图片要对齐于行内文本（一定得对齐加上留白的文本）。 -
vertical-align:bottom
img{vertical-align: bottom; }
原因就是，设置行高后，有留白 -
vertical-align:middle
img{vertical-align: middle; }
看起来貌似没啥区别
没区别的原因是因为，图片很高会扩充高度，文本设置行高后，上下有留白，这么解释，可能还不太懂上图的原因。
图片设置居中与该行，文本保持原来的位置，文本下方貌似比较多，是因为图片撑的。
【还有……】
这两个得相对于设置行高的bottom与top做对比
-
vertical-align:text-top
左：vertical-align:text-top 右：vertical-align: top -
vertical-align:text-bottom
左：vertical-align:text-bottom 右：vertical-align: bottom
看出差别了吧，对齐时忽略行高导致的留白。
别忘记了兼容：IE7及其以前版本表现不好。利用该属性设计界面时，注意测试IE6、7
貌似图片越来越多啦，因为我口才不好，形容不出来啊
