vertical-align 表單元素垂直對(duì)齊的解決方法

于是上網(wǎng)查看了一些網(wǎng)站,發(fā)現(xiàn)這個(gè)問(wèn)題是普遍存在的,如下圖(FF3.5):
在很多網(wǎng)站涉及到表單的頁(yè)面中,都存在這種表單元素與提示文字無(wú)法對(duì)齊的問(wèn)題。于是打算研究一下這個(gè)問(wèn)題。首先,搜索到了wheatlee前輩的文章《大家都對(duì)vertical-align的各說(shuō)各話》。wheatlee在他的文章中關(guān)于垂直居中提到了這樣幾個(gè)關(guān)鍵點(diǎn):
1、vertical-align:middle的時(shí)候,是該元素的中心對(duì)齊周圍元素的中心。
2、這里“中心”的定義是:圖片當(dāng)然就是height的一半的位置,而文字應(yīng)該是基于baseline往上移動(dòng)0.5ex,亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em,以至于其實(shí)不一定是x的正中心(baseline等名詞如果不懂,請(qǐng)先閱讀wheatlee的文章)
按照這個(gè)思路,對(duì)照我遇到的問(wèn)題,首先想到的是先驗(yàn)證一下瀏覽器對(duì)于“復(fù)選框”和圖片是不是使用同樣的規(guī)則來(lái)渲染(是不是把復(fù)選框當(dāng)成一個(gè)正方形圖片來(lái)對(duì)待)。于是寫出下面的代碼:
<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;" src="testpic.gif" />
測(cè)試文字
代碼中的testpic.gif是一個(gè)尺寸與復(fù)選框完全一樣的黑色圖片。FF3.5下顯示如下:
事實(shí)證明,F(xiàn)F3.5對(duì)于復(fù)選框和圖片的垂直對(duì)齊方式是采用同樣的規(guī)則進(jìn)行渲染的,即將復(fù)選框當(dāng)作一個(gè)正方形的圖片(IE不是)。按照wheatlee“middle的時(shí)候,是該元素的中心對(duì)齊周圍元素的中心”的觀點(diǎn),如果我在復(fù)選框后面輸入英文字符,那么復(fù)選框的中心將與英文中小寫字母x的中心對(duì)齊。經(jīng)測(cè)試,F(xiàn)F3.5下面基本上是這樣的(在一些字號(hào)的時(shí)候會(huì)有一定的誤差,比如,如果字體高度是偶數(shù),那么這個(gè)中心點(diǎn)有時(shí)在一般偏上1px,有時(shí)在一半偏下1px)。如圖:
但是這對(duì)于中文來(lái)說(shuō),并不是一個(gè)好的結(jié)果。因?yàn)橹形氖欠綁K字,并且相同字號(hào)的情況下,高度會(huì)比小寫的x高出很多。所以,按照瀏覽器內(nèi)置的方式,只用 vertical-align:middle是無(wú)論如何也無(wú)法對(duì)齊中文的(無(wú)論是只寫中文,中文在前,英文在前,F(xiàn)F3.5都是按照小寫x中心那種方法來(lái)對(duì)齊的)。但是回頭再看看wheatlee的文章,他說(shuō)這個(gè)小寫x中心對(duì)齊的渲染方式,是對(duì)于“文字”來(lái)說(shuō)的。那么,如果不是文字呢…?如果復(fù)選框后面跟的是一個(gè)行內(nèi)元素,如label,而文字是寫在它內(nèi)部的,會(huì)是什么樣呢?瀏覽器會(huì)不會(huì)將這個(gè)內(nèi)聯(lián)元素整體看作一個(gè)“塊”,然后依照類似圖片的規(guī)則進(jìn)行渲染呢?如果那樣,我們就達(dá)到目的了。
但是經(jīng)過(guò)測(cè)試,很遺憾,事實(shí)并不是這樣,加上label后跟沒(méi)加沒(méi)有任何區(qū)別。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下,證明瀏覽器并沒(méi)有按照l(shuí)abel的高度值來(lái)去對(duì)齊中心點(diǎn)。如圖:
如果按照之前的設(shè)想,紅藍(lán)兩線應(yīng)該是重合的。但現(xiàn)在的情況是,它們相差了1px。并且這1px是沒(méi)有規(guī)律的,隨著字號(hào)的放大,并不恒定,貌似輕易也無(wú)法提煉出對(duì)應(yīng)關(guān)系來(lái)。于是想到,再試一下將label也加上vertical-align:middle。結(jié)果如圖:
在FF3.5和IE7下面已經(jīng)很接近于我們希望的狀態(tài)了,只差1px。IE6下… 無(wú)語(yǔ)了。
經(jīng)過(guò)以上折騰,我得出了跟wheatlee相同的結(jié)論,就是,各種瀏覽器之間對(duì)這個(gè)問(wèn)題的處理貌似沒(méi)有任何規(guī)律。并且,似乎每一種瀏覽器對(duì)于 vertical-align:middle的渲染都不是完全遵從W3C所說(shuō)的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”
但是經(jīng)過(guò)仔細(xì)總結(jié)和分析,發(fā)現(xiàn)好像最終對(duì)齊的結(jié)果跟label的高度和當(dāng)前字體中小寫x的中心點(diǎn)都有關(guān)系,兩者同時(shí)影響著渲染結(jié)果(雖然不明白為什么會(huì)這樣)。那么,既然現(xiàn)在的情況以及非常接近于希望的狀態(tài)了,是否可以通過(guò)設(shè)置字體的方式來(lái)改變小寫x的中心點(diǎn)的位置,進(jìn)而對(duì)垂直對(duì)齊的結(jié)果進(jìn)行“微調(diào)”呢?
最終,在不斷的測(cè)試中發(fā)現(xiàn),如果將font-family中的第一個(gè)字體設(shè)置為Tahoma,則可以完美的實(shí)現(xiàn)對(duì)齊(Verdana等字體也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均顯示正常。最終代碼如下:
提示:您可以先修改部分代碼再運(yùn)行
最終效果:
至此,多選框(checkbox)和提示文字對(duì)齊的問(wèn)題已經(jīng)解決,那么其他表單元素呢?試驗(yàn)了一下單選框(radio),發(fā)現(xiàn),還是有問(wèn)題。提示文字依然是偏上。用firebug看了一下,發(fā)現(xiàn)radio元素默認(rèn)有5px的左邊距和3px的上、右邊距,卻沒(méi)有下邊距。如圖:
于是,嘗試去掉radio的外邊距,刷新后顯示正常。(其實(shí)多選框checkbox也是有外邊距的,只是它的外邊距四個(gè)方向都有,并且相等,所以對(duì)于垂直對(duì)齊沒(méi)有影響。)下圖是一些常用表單元素的最終顯示效果以及最終代碼,大家可以用不同瀏覽器看一下實(shí)際的效果(注:由于演示使用的12px的中文實(shí)際只有11px高,而 IE下文本框等元素的高度是22px,一個(gè)是奇數(shù),一個(gè)是偶數(shù),所以這些部分在IE中是無(wú)論如何也對(duì)不齊的,差1px。如果手動(dòng)控制文本框高度為奇數(shù),或者將文字設(shè)置成為偶數(shù)的高度,則顯示正常):
提示:您可以先修改部分代碼再運(yùn)行
相關(guān)文章
css中圖片于文本的基線對(duì)齊與vertical-align屬性設(shè)置
默認(rèn)的情況是圖片頂對(duì)齊而文字底對(duì)齊,通過(guò)設(shè)置css屬性可以使得圖片與文字對(duì)齊,接下來(lái)為大家詳細(xì)介紹下設(shè)置各對(duì)象的vertical-align屬性,感興趣的朋友可以參考下哈2013-04-02css 垂直對(duì)齊 css中vertical-align屬性(垂直對(duì)齊)的使用說(shuō)明
這兩天寫個(gè)頁(yè)面css的時(shí)候用到了vertical-align屬性,使用過(guò)程中踩到了坑,因此整理了一些,以備不時(shí)之需,感興趣的朋友可以了解下哦2013-01-09css vertical-align屬性的一些理解與認(rèn)識(shí)(二) text-top篇
vertical-align是個(gè)相當(dāng)復(fù)雜與精深的屬性,所理解的一些內(nèi)容多少會(huì)有不準(zhǔn)確之處,本集內(nèi)容主要講講我對(duì)在一般情況下vertical-align其作用的理解,以及vertical-align相關(guān)的2013-01-07css vertical-align屬性的一些理解與認(rèn)識(shí)(一)
就說(shuō)說(shuō)我對(duì)vertical-align屬性的一些理解吧,純屬個(gè)人見(jiàn)解,若有不準(zhǔn)確之處還望見(jiàn)諒,若有不準(zhǔn)確之處還望見(jiàn)諒。還有,vertical-align屬性牽扯到的知識(shí)實(shí)在是太多了,不是一2013-01-07line-height 和 vertical-align 行高與行對(duì)齊精解 (圖文)
行高指的是文本行的基線間的距離,但是文本之間的空白距離不僅僅是行高決定的, 同時(shí)也受字號(hào)的影響。2010-08-27- div vertical-align不起作用解決辦法,其實(shí)主要是文檔聲明。2010-03-25
- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性,結(jié)果讓我大吃一驚,這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同。2009-04-02
CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:CSS實(shí)例:vertical-align屬性讓網(wǎng)頁(yè)層居中. vertical-align屬性使網(wǎng)頁(yè)層居中 網(wǎng)頁(yè)源代碼如下: <html> <2009-04-02css vertical-align屬性詳細(xì)圖解分析
vertical-align屬性詳細(xì)分析 最近幾天仔細(xì)研究了一下vertical-align這個(gè)屬性,結(jié)果讓我大吃一驚,這個(gè)很“資深”的CSS標(biāo)準(zhǔn)竟然在各個(gè)瀏覽器里面的表現(xiàn)都各不相同2009-02-10IE6下 vertical-align:middle 和 height 引發(fā)的邊框消失
css樣式: <style type="text/css"> ul{ list-style:none;} li,div{border:1px solid #ff0000; vertical-align:middle; height:50px;} </style> ht2009-02-05