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