一. 簡介
1. vertical-align 數值,比如 -2, 相比於基線向下便宜2px,一般用來修復單選框/複選框和12像素文字大小不對齊的問題.
2. 百分比 此標籤繼承的line-height,但ie6和ie7會出現問題
3. top middle baseline bottom 可以比對英語的4條線來理解
4. 只有一個元素屬於inline或者inline-block,時纔會起作用
inline-block元素就是既可以混排,又可以設置寬高屬性,比如圖片,按鈕,單/複選框,單行多行文本框等表單元素,默認會對vertial-align元素起作用.
vertical-align屬性雖然只會在inline-block上起作用,但有時inline屬性的位置也會發生變化,這不是因爲對vertical-align屬性敏感,而是受制於linebox屬性而不得不發生變化.(並不是這樣,很單純的inline元素也是可以支持vertical-align屬性的)
二. 生效 原理
1. 對於vertical-align:middle,參考手冊上簡單介紹是子元素位於父元素的中間
.box{background:black; color:white; padding-left:20px; line-height:10px;}
.dot{display:inline-block; width:4px; height:4px; background:white; vertical-align:bottom;}
2. 一種複雜的佈局,span裏面嵌套img和div(inline-block),定義line-hight,然後文字就居中了,可以再調整img和span的垂直方向
vertical-align的本質上是個獨立的個體，與後面的line水平的元素是不存在直接的關係的。兩者沒有必然的聯繫，這是一個需要認識清楚的重要的東西
3. 對於2來講,一般情況下,line-hight一般都會小與外層的content area,那麼vertical-align對文字的影響就是顯而易見的了.
小圖標+文字,設置text-top,ie和其他瀏覽器區別是不明顯的
<div style="line-height:200px; border:1px solid #34538b;">
<span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>後面是靜止的文字。
</div>
ie7跟我想象的一樣,外層高度200,大小文字頂部對齊,但ie8直接多了一個距離,而現代瀏覽器,高度不僅高了很多,頂部也沒有對齊....
text-top解釋: 當前元素的頂部跟父元素字體的頂部對齊
複習line box中的幾個重要概念,content area, inlinebox (匿名inlinebox)以及inlinebox組成的linebox
一些東西直接copy吧,因爲寫的實在太晦澀了...
2. 每個inline屬性的標籤外部都有一個inline box，這個inline box是看不見的，這個看不見的inline box扮演者重要的角色，此box與CSS中的line-height屬性相互配合構成了元素高度堆疊的基礎。以我的理解，inline box的高度純粹就是有元素的line-height或是繼承的line-height值決定的。例如本實例中，父div的line-height爲200像素，自然，含“大大的文字”的span標籤所在的inline box的高度就是200像素，換句話說，這個含有vertical-align:text-top屬性的span標籤的實際高度是200像素。
4. span標籤外部不可見的inline box以及文字所在的匿名inline box共同組成了line box，line box也是不可見的，每行文字有且僅一個line box，line box的高度有其內部的一系列的inline boxes高度共同決定，由內部的inline boxes的上下最大絕對差值決定的。例如本實例紅，在現代瀏覽器下，外部div的高度之所以會被撐開，是內部兩個inline boxes共同作用的結果。
所以結合上面的簡單分析，本實例中含有vertical-align:tetx-top屬性的span標籤實際的box區域應該如下圖半透明綠色區域：
注意:這裏的重點在文字上text-topIE8的解釋估計是隻以文字頂部爲標準.,所以會下沉27(60-16)/2,