vertical-align

一、适用范围

vertical-align应用于行内元素和表单元格

二、取值

1. baseline 元素基线与父元素基线对齐，默认值。如果一个图像，表单输入元素或者其他替换元素，那么该元素的底端与父元素基线对齐。它使得浏览器总是把替换元素的底边放在基线上，即使该行中没有其他文本。例如，一个表单元格中只有一个图像，那么图像底端就会与基线对齐，不过在某些浏览器中，基线下面的空间会导致图像下面出现一段空白。（可以将该图像设置为display:block，来避免空白，因为vertical-align对块级元素不起作用，其他一些解决方法见http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/）

2. sub 使一个元素变成下标，这意味着其基线（或者如果这是一个替换元素，则是其底端）相对于父元素的基线降低。

3. super 与sub相反，将元素的基线（或替换元素的底端）相对于父元素的基线升高。

4. top 元素及其后代的顶端与整行的顶端对齐(相对于整行)即元素的行内框的顶端与行框的顶端对齐 单元格的内边距的上边缘与行的顶端对齐

5. text-top 元素顶端与父元素字体的顶线对齐

6. bottom 将元素行内框的底端与行框的底端对齐。

7. text-bottom 元素底端与父元素字体的底线对齐

8. middle 往往但不总是应用于图像。middle会把行内元素框的中点与父元素基线上方0.5ex处的一个点对齐，1ex相对于父元素的font-size定义。很多用户代理都把1ex处理为0.5em，middle往往把元素的垂直中点与父元素基线上方0.25em处的一个点对齐。

9. 百分数 同length,百分比相对于line-height

10. 整数 元素基线超过父元素的基线指定高度。可以取负值

三、行框图

line-box模型：http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/

四、应用举例

 1、div中只有一个span

1）设置div height=50px

因为行内框和行框是重合的，因此改变vertical-align 为top bottom都不会改变对齐方式

刚开始默认为baseline时，元素的基线和父元素的基线是对齐的，如果改为middle，那么元素的中点就要和父元素的基线上方0.25em处对齐，会使元素稍微下降

2）设置div line-height=50px

设置line-height，会使元素垂直居中

因为行内框和行框同样是重合的，因此现象和1）一样

2、div里面只有一个img

1）设置div height=50px

行内框和行框重合，因此现象同1中1）

2）设置div line-height=50px

top会使图片的顶端与div顶端对齐

bottom使图片的底端和div底端对齐

middle使图片中点和基线上方0.25em对齐

3、div 中有img span

1）设置div height=50px

现在行框的顶线是img的顶部，行框的底线是img的底部

span:top   span的顶部和行框顶部对齐

span:bottom span的底部和行框的底部对齐

span:middle span的中心和父元素基线上方0.25em对齐，相比于baseline下降

修改img的vertical-align时，调整的是span

2）line-height=50

line-height高于图片，所以行框和行内框重叠

还是直接上例子吧https://cdn.rawgit.com/Yangqin0607/ife.baidu/master/vertical-align/verticalAlign.html