文章参考
http://www.cnblogs.com/rixinren2010/archive/2012/03/10/2389301.html
适用于： 行内元素和单元格（table-cell）元素
特别提醒：vertical-align只对行内元素有效，对块级元素无效。
个人理解应用范围：
1、图片 和 文字混排，使用vertical-align属性来定位
2、在table标签中的td种使用vertical-align属性来定位（可以使用display:table-cell,注意该标签父div一定是display:table）
<style> .div_table{ display: table; } .div_cell{ display: table-cell; border: 1px solid green; } </style> <div class="div_table"> <div class="div_cell" style="vertical-align: middle"> 垂直居中的内容 </div> <div class="div_cell"> 随机的内容<br> 随机的内容<br> <span style="color: red">IE6 不支持display:table</span><br> 随机的内容<br> 随机的内容<br> 随机的内容<br> </div> </div> <p> <p> <p> <div> <span>x</span><span style="vertical-align: top;font-size: 6px">2</span><br/> <span>x</span><sub>2</sub><br/> <!-- 这里一定要注意字体的大小，否则显示不明显 --> <span>x</span><span style="vertical-align: top">2</span><br/> 凤凰网<span style="vertical-align:super; font-size:10px">TM</span><br/> 凤凰网<span style="vertical-align:sub; font-size:10px">TM</span> </div>
