CSS中关于vertical-align垂直对齐

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

1、为何我设置的vertical-align没用？

相信不少前端开发人员都遇到过这个问题，有的时候本身明明写了vertical-align属性值，但就是没效果，归其缘由，是由于vertical-align是个比较奇葩的东西，想要让他起做用，就要投其所好。

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

2、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而言的，因此这一点必需要理解，它的垂直对齐方式和右边的文字没有半毛钱关系。