vertical-align属性只能作用在display计算值为inline、inline-block，inline-table或table-cell的元素上。因此，默认情况下，span、strong、em等内联元素，img、button、input等替换元素，非html规范的自定义标签元素，以及<td>单元格，都是支持vertical-align属性的，其他块级元素则不支持。浮动和绝对定位会让元素块状化，从而让内联元素的vertical-align不生效。
vertical-align百分比
vertical-align的百分比值是相对于line-height计算的
且是以line-height的基线为基础，vertical-align:0%和vertical-align：baseline效果一样
vertical-align：inline-block和baseline
vertical-align属性的默认值baseline在文本之类的内联元素那里就是字符x的下边缘，对于替换元素则是替换元素的下边缘。但是，如果是inline-block元素则规则要复杂了：一个inline-block元素，如果里面就是没有图文内容，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内的图文的基线。见demo：inline-block元素的vertical-align.html
vertical-align:middle实现垂直居中
内联元素：元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。vertical-align:middle定义是元素的中线和字符x中心点对齐
table-cell元素：单元格填充盒子相对于外面的表格行居中对齐。table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。就算table-cell元素的子元素是一个块级元素，也一样可以让其有各种垂直对齐表现。
middle将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐这里元素盒子的垂直中点容易确定，父盒子的baseline也好确定，但是x-height要进行计算得到，这个x-height就是字母x的高度。
baseline确定的规则
1、inline-table元素的baseline是它的table第一行的baseline。
2、父元素【linebox】的baseline是最后一个inlinebox的baseline。
总之，vertical-align给大家了，希望大家参考使用。