CSS中关于vertical-align垂直对齐

一向以来，我对vertical-align的属性都搞的不是太清楚，今天刚好碰到有朋友问我相关的问题，于是自己潜心研究了一番，发现这玩意还真不是个简单的东西，在此我分享的东西都是抛弃脑残的IE的，如果你用的是脑残的IE，请跳过此篇文章。

一、为什么我设置的vertical-align没用？

相信很多前端开发人员都遇到过这个问题，有的时候自己明明写了vertical-align属性值，但就是没效果，归其原因，是因为vertical-align是个比较奇葩的东西，想要让他起作用，就要投其所好。

我们知道css中display属性有三种inline/inline-block/block，在这里面，vertical-align只认识inline-block，也就是说只有给标签添加了display:inline-block属性，vertical-align才会起作用。

二、vertical-align设置的值到底是针对谁的？

vertical-align的值有很多：常见的有baseline（默认）、top（顶部对齐）、text-top（与文本顶部对齐）、middle（居中）、bottom（底部对齐）、text-bottom（与文本底部对齐）。

看下面这段代码：

<div class="box">
    <span class="aa"></span>
    这是一段文本
</div>

<style>
    .box{background:red; color:white; padding-left:20px;}
    .aa{display:inline-block; width:5px; height:5px; background:blue;}
</style>

默认的情况看起来基本不爽，我们一般还是最常用vertical-align:middle;

<style>
    .box{background:red; color:white; padding-left:20px;}
    .aa{display:inline-block; width:5px; height:5px; background:blue;vertical-align:middle;}
</style>

加上以后，span小点就跟右边的文字居中对齐了，当你不停的变换vertical-align的值时，你会发现span的垂直对齐方式对相对于它的父级div而言的，所以这一点必须要理解，它的垂直对齐方式和右边的文字没有半毛钱关系。