表單元素input、按鈕、文字完美垂直居中對齊方法

來源：昆明多彩網絡公司 日期：2012-02-11 閱讀： 發表評論

這是一個昆明做網站中已經用到的技巧。

本文(wen)最終總結出(chu)來(lai)辦法就是要對齊(qi)的表(biao)單內容(rong)（含文(wen)字、圖片、表(biao)單各種元(yuan)素、label）字體設置為(wei)Tahoma，則可(ke)(ke)以(yi)完美(mei)的實(shi)現對齊(qi)(Verdana等字體也可(ke)(ke)以(yi))，其中(zhong)個別(bie)的input元(yuan)素如radio的padding和margin設置為(wei)0，即(ji)可(ke)(ke)完美(mei)解決表(biao)單元(yuan)素input等對齊(qi)問題。

最近的項目涉及到很多表單的制作，特別是復選框(checkbox)和單選框(radio)。但是在前端開發過程中發現，單(復)選框和它們后面的提示文字在不進行任何設置的情況下，是無法對齊的，而且在Firefox和IE中相差甚大。即使設置了vertical-align:middle，也依然不能完美對齊。如下圖所示：



于是上網查看了一些網站，發現這個問題是普遍存在的，如下圖（FF3.5）：



在很多網站涉及到表單的頁面中，都存在這種表單元素與提示文字無法對齊的問題。于是打算研究一下這個問題。首先，搜索到了wheatlee前輩的文章《》。wheatlee在他的文章中關于垂直居中提到了這樣幾個關鍵點：

1、vertical-align:middle的時候，是該元素的中心對齊周圍元素的中心。

2、這里“中心”的定義是：圖片當然就是height的一半的位置，而文字應該是基于baseline往上移動0.5ex，亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個單位定義為0.5em，以至于其實不一定是x的正中心

（baseline等名詞如果不懂，請先閱讀wheatlee的文章）

按照這個思路，對照我遇到的問題，首先想到的是先驗證一下瀏覽器對于“復選框”和圖片是不是使用同樣的規則來渲染（是不是把復選框當成一個正方形圖片來對待）。于是寫出下面的代碼：


<style>
body{font-size:12px;}
</style>
<input style="vertical-align:middle;" name="test" type="checkbox">
<img style="vertical-align:middle;"  src="testpic.gif" />
測試文字

代碼中的testpic.gif是一個尺寸與復選框完全一樣的黑色圖片。FF3.5下顯示如下：

事實證明，FF3.5對于復選框和圖片的垂直對齊方式是采用同樣的規則進行渲染的，即將復選框當作一個正方形的圖片(IE不是)。按照wheatlee“middle的時候，是該元素的中心對齊周圍元素的中心”的觀點，如果我在復選框后面輸入英文字符，那么復選框的中心將與英文中小寫字母x的中心對齊。經測試，FF3.5下面基本上是這樣的(在一些字號的時候會有一定的誤差，比如，如果字體高度是偶數，那么這個中心點有時在一般偏上1px，有時在一半偏下1px)。如圖：

但(dan)是(shi)這(zhe)(zhe)對于中(zhong)(zhong)文(wen)(wen)來(lai)(lai)說，并不(bu)是(shi)一(yi)個(ge)好的結果。因為中(zhong)(zhong)文(wen)(wen)是(shi)方(fang)塊(kuai)字(zi)，并且相同字(zi)號的情況(kuang)下，高(gao)度(du)會(hui)(hui)比小(xiao)寫(xie)的x高(gao)出(chu)很多。所以(yi)，按照瀏覽(lan)器內(nei)置的方(fang)式(shi)，只(zhi)用 vertical-align:middle是(shi)無(wu)論如(ru)(ru)何也(ye)無(wu)法對齊中(zhong)(zhong)文(wen)(wen)的（無(wu)論是(shi)只(zhi)寫(xie)中(zhong)(zhong)文(wen)(wen)，中(zhong)(zhong)文(wen)(wen)在(zai)前，英文(wen)(wen)在(zai)前，FF3.5都是(shi)按照小(xiao)寫(xie)x中(zhong)(zhong)心(xin)那(nei)(nei)種方(fang)法來(lai)(lai)對齊的）。但(dan)是(shi)回頭再看看wheatlee的文(wen)(wen)章(zhang)，他說這(zhe)(zhe)個(ge)小(xiao)寫(xie)x中(zhong)(zhong)心(xin)對齊的渲(xuan)染方(fang)式(shi)，是(shi)對于“文(wen)(wen)字(zi)”來(lai)(lai)說的。那(nei)(nei)么，如(ru)(ru)果不(bu)是(shi)文(wen)(wen)字(zi)呢…？如(ru)(ru)果復(fu)選框(kuang)后面跟的是(shi)一(yi)個(ge)行(xing)內(nei)元素(su)，如(ru)(ru)label，而文(wen)(wen)字(zi)是(shi)寫(xie)在(zai)它內(nei)部的，會(hui)(hui)是(shi)什么樣(yang)(yang)呢？瀏覽(lan)器會(hui)(hui)不(bu)會(hui)(hui)將這(zhe)(zhe)個(ge)內(nei)聯元素(su)整體(ti)看作一(yi)個(ge)“塊(kuai)”，然后依照類似(si)圖(tu)片的規則進行(xing)渲(xuan)染呢？如(ru)(ru)果那(nei)(nei)樣(yang)(yang)，我們就達到目的了。

但是經過測試，很遺憾，事實并不是這樣，加上label后跟沒加沒有任何區別。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，證明瀏覽器并沒有按照label的高度值來去對齊中心點。如圖：


如果按照之前的設想，紅藍兩線應該是重合的。但現在的情況是，它們相差了1px。并且這1px是沒有規律的，隨著字號的放大，并不恒定，貌似輕易也無法提煉出對應關系來。于是想到，再試一下將label也加上vertical-align:middle。結果如圖：


在FF3.5和IE7下面已經很接近于我們希望的狀態了，只差1px。IE6下… 無語了。

經過以上折騰，我得出了跟wheatlee相同的結論，就是，各種瀏覽器之間對這個問題的處理貌似沒有任何規律。并且，似乎每一種瀏覽器對于 vertical-align:middle的渲染都不是完全遵從W3C所說的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”

但是經過仔細總結和分析，發現好像最終對齊的結果跟label的高度和當前字體中小寫x的中心點都有關系，兩者同時影響著渲染結果(雖然不明白為什么會這樣)。那么，既然現在的情況以及非常接近于希望的狀態了，是否可以通過設置字體的方式來改變小寫x的中心點的位置，進而對垂直對齊的結果進行“微調”呢？

最終，在不斷的測試中發現，如果將font-family中的第一個字體設置為Tahoma，則可以完美的實現對齊(Verdana等字體也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均顯示正常。
最終效果：

至此，多選框(checkbox)和提示文字對齊的問題已經解決，那么其他表單元素呢？試驗了一下單選框(radio)，發現，還是有問題。提示文字依然是偏上。用firebug看了一下，發現radio元素默認有5px的左邊距和3px的上、右邊距，卻沒有下邊距。如圖：



于是，嘗試去掉radio的外邊距，刷新后顯示正常。（其實多選框checkbox也是有外邊距的，只是它的外邊距四個方向都有，并且相等，所以對于垂直對齊沒有影響。）下圖是一些常用表單元素的最終顯示效果以及最終代碼，大家可以用不同瀏覽器看一下實際的效果（注：由于演示使用的12px的中文實際只有11px高，而 IE下文本框等元素的高度是22px，一個是奇數，一個是偶數，所以這些部分在IE中是無論如何也對不齊的，差1px。如果手動控制文本框高度為奇數，或者將文字設置成為偶數的高度，則顯示正常）：