css vertical-align屬性詳細(xì)圖解分析
發(fā)布時(shí)間:2009-02-10 11:24:11 作者:佚名
我要評論

vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性,結(jié)果讓我大吃一驚,這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。
vertical-align的值有點(diǎn)多,包括 baseline sub supper top text-top bottom text-bottom midd
vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性,結(jié)果讓我大吃一驚,這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。
vertical-align的值有點(diǎn)多,包括 baseline sub supper top text-top bottom text-bottom middle以及各種長度值(%,em,ex等等)。我先給大家看一個(gè)我覺得最夸張的值:bottom。代碼如下:
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}
然后大家看一看這段CSS在各個(gè)瀏覽器中的效果(圖片是我故意做成那個(gè)樣子,為了可以看清楚相對位置):




呃,這個(gè)結(jié)果其實(shí)很讓人匪夷所思,一般我會認(rèn)為Firefox會比IE解釋得更正確,但是看過Opera之后發(fā)現(xiàn)它和IE是一樣的,而Safari/Win是站在Firefox那邊。說實(shí)話,我不知道這是怎么回事。
仔細(xì)學(xué)習(xí)了《CSS權(quán)威指南(第二版)》,甚至還去查閱了W3C,然后自己做出一個(gè)關(guān)于vertical-align的圖:

按照W3C的定義,當(dāng)內(nèi)聯(lián)元素的vertical-align設(shè)置為:
一、baseline, top, bottom的時(shí)候,都是該元素的baseline(或middle, top, bottom)對其周圍元素的相同位置,如圖片的top和周圍文字的top對齊。
二、text-top和text-bottom的時(shí)候,是該元素的top(或bottom)對齊周圍元素的text-top(或text-bottom)。
三、長度(%, em, ex)的時(shí)候,是基于baseline往上移動,所以正數(shù)往上,負(fù)數(shù)往下。
四、middle的時(shí)候,是該元素的中心對齊周圍元素的中心。這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(以上圖為例,x的高度應(yīng)該是10px,而em是18px,所以兩個(gè)值不一樣)。
但是,即使是按照上面的準(zhǔn)則,各個(gè)瀏覽器的解釋如此迥異也讓我匪夷所思。我也懶得去研究為什么是這樣子。總的來說呢,應(yīng)該就是它們對字體的每一條線的位置的定義都不大一樣,所以這個(gè)問題不單跟vertical-align有關(guān),而跟瀏覽器對內(nèi)聯(lián)文本和內(nèi)聯(lián)圖片的結(jié)構(gòu)的解釋有很大關(guān)系。
vertical-align的值有點(diǎn)多,包括 baseline sub supper top text-top bottom text-bottom middle以及各種長度值(%,em,ex等等)。我先給大家看一個(gè)我覺得最夸張的值:bottom。代碼如下:
復(fù)制代碼
代碼如下:p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}
然后大家看一看這段CSS在各個(gè)瀏覽器中的效果(圖片是我故意做成那個(gè)樣子,為了可以看清楚相對位置):





呃,這個(gè)結(jié)果其實(shí)很讓人匪夷所思,一般我會認(rèn)為Firefox會比IE解釋得更正確,但是看過Opera之后發(fā)現(xiàn)它和IE是一樣的,而Safari/Win是站在Firefox那邊。說實(shí)話,我不知道這是怎么回事。
仔細(xì)學(xué)習(xí)了《CSS權(quán)威指南(第二版)》,甚至還去查閱了W3C,然后自己做出一個(gè)關(guān)于vertical-align的圖:

按照W3C的定義,當(dāng)內(nèi)聯(lián)元素的vertical-align設(shè)置為:
一、baseline, top, bottom的時(shí)候,都是該元素的baseline(或middle, top, bottom)對其周圍元素的相同位置,如圖片的top和周圍文字的top對齊。
二、text-top和text-bottom的時(shí)候,是該元素的top(或bottom)對齊周圍元素的text-top(或text-bottom)。
三、長度(%, em, ex)的時(shí)候,是基于baseline往上移動,所以正數(shù)往上,負(fù)數(shù)往下。
四、middle的時(shí)候,是該元素的中心對齊周圍元素的中心。這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(以上圖為例,x的高度應(yīng)該是10px,而em是18px,所以兩個(gè)值不一樣)。
但是,即使是按照上面的準(zhǔn)則,各個(gè)瀏覽器的解釋如此迥異也讓我匪夷所思。我也懶得去研究為什么是這樣子。總的來說呢,應(yīng)該就是它們對字體的每一條線的位置的定義都不大一樣,所以這個(gè)問題不單跟vertical-align有關(guān),而跟瀏覽器對內(nèi)聯(lián)文本和內(nèi)聯(lián)圖片的結(jié)構(gòu)的解釋有很大關(guān)系。
相關(guān)文章
深入理解CSS中的vertical-align屬性和基線問題
這篇文章主要介紹了深入理解CSS中的vertical-align屬性和基線問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考2020-04-03- 本文向大家介紹一下CSS vertical-align 屬性的用法,該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。2014-10-22
css中圖片于文本的基線對齊與vertical-align屬性設(shè)置
默認(rèn)的情況是圖片頂對齊而文字底對齊,通過設(shè)置css屬性可以使得圖片與文字對齊,接下來為大家詳細(xì)介紹下設(shè)置各對象的vertical-align屬性,感興趣的朋友可以參考下哈2013-04-02css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個(gè)頁面css的時(shí)候用到了vertical-align屬性,使用過程中踩到了坑,因此整理了一些,以備不時(shí)之需,感興趣的朋友可以了解下哦2013-01-09CSS實(shí)例:vertical-align屬性讓網(wǎng)頁層居中
網(wǎng)頁制作Webjx文章簡介:CSS實(shí)例:vertical-align屬性讓網(wǎng)頁層居中. vertical-align屬性使網(wǎng)頁層居中 網(wǎng)頁源代碼如下: <html> <2009-04-02- CSS中的vertical-align用于設(shè)置行內(nèi)塊或者行內(nèi)元素行內(nèi)元素的對齊方式,使用過程中的坑很多,本文就詳細(xì)的介紹一下vertical-align屬性的具體使用方法,感興趣的可以了解一2023-05-11