css中vertical-align（垂直對齊）的使用

　　1.vertical-align的語法

vertical-align屬性的具體定義列表以下： 
　　語法：        vertical-align : baseline | sub | super | top | text- top | middle | bottom | text-bottom | <百分比> | <長度> | inherit 
　　說明：        設置元素內容的垂直對齊方式 
　　值：   baseline：基線對齊；sub：下標；super：上標；top：頂端對齊；text-top：與文本的頂端對齊；middle：中部對齊；bottom：底端對齊；

　　　　　　text-bottom：文本的底端對齊； 
　　百分比和長度：CSS2，可爲負數。 
　　初始值：        baseline 
　　繼承性：        不繼承 
　　適用於：        行內元素和單元格（table-cell）元素 
　　媒體：        視覺 
　　計算值：        百分比和長度值爲絕對長度；其餘同指定值 

　　特別提醒：vertical-align只對行內元素有效，對塊級元素無效。

　　關於使用的詳細介紹能夠參考逍遙嘆的《垂直對齊：vertical-align屬性（轉）》。

　　2.關於vertical-align：middle的問題

　　middle的時候，是該元素的中心對齊周圍元素的中心。這裏「中心」的定義是：圖片固然就是height的一半的位置，而文字應該是基於baseline往上移動0.5ex。可是不少瀏覽器每每把ex這個單位定義爲0.5em，以致於其實不必定是文字的正中心。

　　因此在使用middle的時候要特別注意，要在不一樣瀏覽器中調試。

　　3.我遇到的問題　

　　頁面局部html代碼：　

1 <ul class="gclearfix">                
2     <li>
3         <em class="num top">1</em>
4         <a href="#">我這段長長的文字只是來測試行內高度的的的的的的的的的的。。。。。。。。。。。。。</a>
5         <a class="detail" href="#"></a>
6     </li>                    
7 </ul>

　　相關樣式表css代碼：

1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;vertical-align: middle;}
2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;}
3 #hot-sou ul li .top{background-color: #F6872C;}
4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;}
5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}

　　注意上圖中的代碼我在li中使用了vertical-align：middle；li是塊級元素。

　　　　　　　　　　　　　　　　　　　　　　　　　　(by guorui-20120920)

　　根據上面的介紹咱們能夠推斷這樣使用是不正確的，vertical-align不繼承，因此li中a的vertical-align都按照瀏覽器的默認來取值。所以表現也會有差別。

　　chrome下的表現：

　　

　　　　　　

　　IE9下的表現：　                                        IE7下的表現：　　　　　　　　　　　　

　　　　

　　IE6下的表現：

　　

　　從上面的圖中能夠看出，li中的vertical-align：middle（它自己就沒有這個屬性）；並無「遺傳」給它裏面的em和a（em和a被瀏覽器「潛規則」了）。

　　解決的辦法是把vertical-align：middle；正確的寫入到li中的em和a裏面。　　

1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
2 #hot-sou ul li .num{width: 15px;height: 15px;margin-top: 3px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}
3 #hot-sou ul li .top{background-color: #F6872C;}
4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;vertical-align: middle;}
5 #hot-sou ul li .detail{width: 17px;height: 17px;line-height: 17px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;margin-top:2px;}
6 #hot-sou ul li .detail:hover{background-position:0 -30px;}

　　更新代碼後。。。

　　chrome下的表現：

　　

　　IE9下的表現：　　　　　　　　　　　　　　IE7下的表現：

　　

　　IE6下的表現：

　　

　　經過上面的比較發現，仍是沒有對齊，可是這是代碼中的邊距、行高等影響了咱們，如今咱們把他們統一塊兒來。

1 #hot-sou ul li{overflow: hidden;padding: 2px 0 3px;}
2 #hot-sou ul li .num{width: 15px;height: 15px;background-color: #CCC;line-height: 15px;text-align: center;color: #FFF;display:inline-block;vertical-align: middle;}
3 #hot-sou ul li .top{background-color: #F6872C;}
4 #hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:15px;line-height:15px;white-space:nowrap;vertical-align: middle;}
5 #hot-sou ul li .detail{width: 15px;height: 15px;line-height: 15px;background:url(http://p0.qhimg.com/t01a607b2b834b26673.gif) no-repeat;margin-left:10px;}
6 #hot-sou ul li .detail:hover{background-position:0 -30px;}

　　更新代碼後。。。

　　chrome下的表現：　　　　　　　　　　　　IE9下的表現：

　　

　　IE7下的表現：　　　　　　　　　　　　　　IE6下的表現：

　　

　　經過上面的比較，咱們發現這樣統一設置行高後，li中子元素的基線一致了，垂直居中也就得到了比較滿意的結果。

　　總結：此次遇到的問題主要是vertical-align正確使用的問題，經過研究瞭解到如何規範使用，特別是有些屬性在塊級元素和行內元素使用上的差異。同時不一樣瀏覽器對於屬性默認值的解析也是測試時須要注意的問題。若是開發中使用的是height與line-height相同的取值，會大大減小不一樣瀏覽器出現差異的狀況，因此這也是開發中須要注意的地方。