vertical-align：讓表單與文字垂直對齊

/vertical－ａｌign:讓表單與文字垂直對齊２009－07—27來源:藍(lán)色理想【大

中

小】評論:4更多最近的項(xiàng)目涉及到很多表單的制作，特別是復(fù)選框(checkbｏx）和單選框（radio）。但是在前端開發(fā)過程中發(fā)現(xiàn),單（復(fù))選框和它們后面的提示文字在不進(jìn)行任何設(shè)置的情況下，是無法對齊的，而且在Firｅfox和IE中相差甚大。即使設(shè)置了ｖｅｒｔical-align:miｄｄle,也依然不能完美對齊。如下圖所示：于是上網(wǎng)查看了一些網(wǎng)站，發(fā)現(xiàn)這個(gè)問題是普遍存在的，如下圖（FF3。5)：在很多網(wǎng)站涉及到表單的頁面中，都存在這種表單元素與提示文字無法對齊的問題.于是打算研究一下這個(gè)問題。首先，搜索到了wｈｅatlee前輩的文章《大家都對vｅrｔiｃal—align的各說各話》.wheatleｅ在他的文章中關(guān)于垂直居中提到了這樣幾個(gè)關(guān)鍵點(diǎn)：1、vertiｃal－ａｌign：middlｅ的時(shí)候,是該元素的中心對齊周圍元素的中心。2、這里“中心”的定義是:圖片當(dāng)然就是heighｔ的一半的位置，而文字應(yīng)該是基于baｓeliｎe往上移動0。5ex，亦即小寫字母“x"的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.５em,以至于其實(shí)不一定是x的正中心(baseliｎｅ等名詞如果不懂，請先閱讀ｗhｅatlee的文章)按照這個(gè)思路,對照我遇到的問題,首先想到的是先驗(yàn)證一下瀏覽器對于“復(fù)選框”和圖片是不是使用同樣的規(guī)則來渲染（是不是把復(fù)選框當(dāng)成一個(gè)正方形圖片來對待）。于是寫出下面的代碼：〈sｔylｅ＞

body{fｏnt—sizｅ：１2pｘ;｝

〈／stｙle〉?〈inｐuｔstyle="verｔical-aｌiｇｎ：ｍiddlｅ;"nａme＝"teｓｔ”type=＂ｃheｃkboｘ”>?<imｇｓtylｅ＝＂vertｉcal—align：middlｅ;”

src=＂tｅstpｉc。giｆ＂/〉

測試文字代碼中的ｔesｔpic。giｆ是一個(gè)尺寸與復(fù)選框完全一樣的黑色圖片。ＦF３。5下顯示如下:事實(shí)證明，ＦF3．５對于復(fù)選框和圖片的垂直對齊方式是采用同樣的規(guī)則進(jìn)行渲染的,即將復(fù)選框當(dāng)作一個(gè)正方形的圖片（IE不是)。按照wheatlee“ｍidｄle的時(shí)候,是該元素的中心對齊周圍元素的中心"的觀點(diǎn)，如果我在復(fù)選框后面輸入英文字符，那么復(fù)選框的中心將與英文中小寫字母ｘ的中心對齊.經(jīng)測試，F(xiàn)F3．5下面基本上是這樣的（在一些字號的時(shí)候會有一定的誤差,比如，如果字體高度是偶數(shù),那么這個(gè)中心點(diǎn)有時(shí)在一般偏上１ｐx，有時(shí)在一半偏下1ｐｘ)。如圖：但是這對于中文來說,并不是一個(gè)好的結(jié)果。因?yàn)橹形氖欠綁K字，并且相同字號的情況下,高度會比小寫的x高出很多。所以，按照瀏覽器內(nèi)置的方式，只用verticaｌ—align:miｄdle是無論如何也無法對齊中文的(無論是只寫中文,中文在前，英文在前，F(xiàn)F3.5都是按照小寫ｘ中心那種方法來對齊的)。但是回頭再看看ｗheaｔｌｅe(cuò)的文章，他說這個(gè)小寫x中心對齊的渲染方式，是對于“文字"來說的.那么,如果不是文字呢…？如果復(fù)選框后面跟的是一個(gè)行內(nèi)元素，如ｌabel，而文字是寫在它內(nèi)部的，會是什么樣呢?瀏覽器會不會將這個(gè)內(nèi)聯(lián)元素整體看作一個(gè)“塊",然后依照類似圖片的規(guī)則進(jìn)行渲染呢？如果那樣,我們就達(dá)到目的了。但是經(jīng)過測試,很遺憾，事實(shí)并不是這樣，加上ｌabel后跟沒加沒有任何區(qū)別.FF3。5／IE6／IE7均是如此.在FF３．5中用fireｂｕg看一下，證明瀏覽器并沒有按照lａｂeｌ的高度值來去對齊中心點(diǎn).如圖：如果按照之前的設(shè)想,紅藍(lán)兩線應(yīng)該是重合的。但現(xiàn)在的情況是，它們相差了1px。并且這１pｘ是沒有規(guī)律的，隨著字號的放大,并不恒定，貌似輕易也無法提煉出對應(yīng)關(guān)系來。于是想到,再試一下將labｅl也加上vｅrｔical－aｌiｇn:mｉｄdｌe。結(jié)果如圖：在ＦF３。5和IE7下面已經(jīng)很接近于我們希望的狀態(tài)了，只差1ｐｘ。ＩE6下…無語了.經(jīng)過以上折騰，我得出了跟wｈｅａt(yī)ｌee相同的結(jié)論，就是,各種瀏覽器之間對這個(gè)問題的處理貌似沒有任何規(guī)律.并且，似乎每一種瀏覽器對于vｅｒtｉcal-align:mｉddlｅ的渲染都不是完全遵從W3Ｃ所說的“Alignｔheveｒtｉcalmidpointoftｈeboxwiththebaselｉneｏfthepａrｅntbｏxｐlｕsｈalfｔhex－h(huán)eighｔofｔｈepareｎｔ．”但是經(jīng)過仔細(xì)總結(jié)和分析，發(fā)現(xiàn)好像最終對齊的結(jié)果跟label的高度和當(dāng)前字體中小寫x的中心點(diǎn)都有關(guān)系,兩者同時(shí)影響著渲染結(jié)果(雖然不明白為什么會這樣）。那么，既然現(xiàn)在的情況以及非常接近于希望的狀態(tài)了,是否可以通過設(shè)置字體的方式來改變小寫x的中心點(diǎn)的位置,進(jìn)而對垂直對齊的結(jié)果進(jìn)行“微調(diào)”呢？最終，在不斷的測試中發(fā)現(xiàn)，如果將ｆont—fａmｉlｙ中的第一個(gè)字體設(shè)置為Tａｈoma，則可以完美的實(shí)現(xiàn)對齊（Ｖeｒｄana等字體也可以)。而且在FF3。５/IE6/IＥ7/IE8和Chrｏmｅ中均顯示正常。最終代碼如下：

提示:您可以先修改部分代碼再運(yùn)行最終效果：至此，多選框（ｃhecｋbox)和提示文字對齊的問題已經(jīng)解決，那么其他表單元素呢?試驗(yàn)了一下單選框(radio)，發(fā)現(xiàn),還是有問題。提示文字依然是偏上.用fｉreｂug看了一下,發(fā)現(xiàn)ｒａdio元素默認(rèn)有５px的左邊距和3px的上、右邊距，卻沒有下邊距。如圖：于是，嘗試去掉radio的外邊距,刷新后顯示正常。(其實(shí)多選框checkboｘ也是有外邊距的,只是它的外邊距四個(gè)方向都有,并且相等,所以對于垂直對齊沒有影響。）下圖是一些常用表單元素的最終顯示效果以及最終代碼，大家可以用不同瀏覽器看一下實(shí)際的效果（注:由于演示使用的12px的中文實(shí)際只有11ｐx高，而IＥ下文本框等元素的高度是22ｐx，一個(gè)是奇數(shù)，一個(gè)是偶數(shù),所以這些部分在IＥ中是無論如何也對不齊的，差1px.如果手動控制文本框高度為奇數(shù),或者將文字設(shè)置成為偶數(shù)的高度,則顯示正常）：

提示:您可以先修改部分代碼再運(yùn)行而且我發(fā)現(xiàn)，不但解決了中文的問題,如果提示信息換成其他語言