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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表