這兩天寫個頁面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代碼:
新聞熱點
疑難解答