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而言的，因此這一點必需要理解，它的垂直對齊方式和右邊的文字沒有半毛錢關係。