這兩天寫個頁面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代碼：　

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

相關樣式表css代碼：

#hot-sou ul li{overflow: hidden;padding: 2px 0 3px;vertical-align: middle;}
#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;}
#hot-sou ul li .top{background-color: #F6872C;}
#hot-sou ul li a{width: 192px;display: inline-block;margin-left: 5px;overflow:hidden;height:18px;white-space:nowrap;}
#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都按照瀏覽器的默認來取值。因此表現也會有差異。