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

來(lái)源：昆明多彩網(wǎng)絡(luò )公司日期：2012-02-11 閱讀：發(fā)表評論

本文最終總結出來(lái)辦法就是要對齊的表單內容（含文字、圖片、表單各種元素、label），完美解決表單元素input等對齊問(wèn)題。

這是一個(gè)昆明做網(wǎng)站中已經(jīng)用到的技巧。

本文最終總結出來(lái)辦法就是要對齊的表單內容（含文字、圖片、表單各種元素、label）字體設置為T(mén)ahoma，則可以完美的實(shí)現對齊(Verdana等字體也可以)，其中個(gè)別的input元素如radio的padding和margin設置為0，即可完美解決表單元素input等對齊問(wèn)題。

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

于是上網(wǎng)查看了一些網(wǎng)站，發(fā)現這個(gè)問(wèn)題是普遍存在的，如下圖（FF3.5）：

在很多網(wǎng)站涉及到表單的頁(yè)面中，都存在這種表單元素與提示文字無(wú)法對齊的問(wèn)題。于是打算研究一下這個(gè)問(wèn)題。首先，搜索到了wheatlee前輩的文章《大家都對vertical-align的各說(shuō)各話(huà)》。wheatlee在他的文章中關(guān)于垂直居中提到了這樣幾個(gè)關(guān)鍵點(diǎn)：

1、vertical-align:middle的時(shí)候，是該元素的中心對齊周?chē)氐闹行摹?br />
2、這里“中心”的定義是：圖片當然就是height的一半的位置，而文字應該是基于baseline往上移動(dòng)0.5ex，亦即小寫(xiě)字母“x”的正中心。但是很多瀏覽器往往把ex這個(gè)單位定義為0.5em，以至于其實(shí)不一定是x的正中心

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

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

<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是一個(gè)尺寸與復選框完全一樣的黑色圖片。FF3.5下顯示如下：

事實(shí)證明，FF3.5對于復選框和圖片的垂直對齊方式是采用同樣的規則進(jìn)行渲染的，即將復選框當作一個(gè)正方形的圖片(IE不是)。按照wheatlee“middle的時(shí)候，是該元素的中心對齊周?chē)氐闹行?rdquo;的觀(guān)點(diǎn)，如果我在復選框后面輸入英文字符，那么復選框的中心將與英文中小寫(xiě)字母x的中心對齊。經(jīng)測試，FF3.5下面基本上是這樣的(在一些字號的時(shí)候會(huì )有一定的誤差，比如，如果字體高度是偶數，那么這個(gè)中心點(diǎn)有時(shí)在一般偏上1px，有時(shí)在一半偏下1px)。如圖：

但是這對于中文來(lái)說(shuō)，并不是一個(gè)好的結果。因為中文是方塊字，并且相同字號的情況下，高度會(huì )比小寫(xiě)的x高出很多。所以，按照瀏覽器內置的方式，只用 vertical-align:middle是無(wú)論如何也無(wú)法對齊中文的（無(wú)論是只寫(xiě)中文，中文在前，英文在前，FF3.5都是按照小寫(xiě)x中心那種方法來(lái)對齊的）。但是回頭再看看wheatlee的文章，他說(shuō)這個(gè)小寫(xiě)x中心對齊的渲染方式，是對于“文字”來(lái)說(shuō)的。那么，如果不是文字呢…？如果復選框后面跟的是一個(gè)行內元素，如label，而文字是寫(xiě)在它內部的，會(huì )是什么樣呢？瀏覽器會(huì )不會(huì )將這個(gè)內聯(lián)元素整體看作一個(gè)“塊”，然后依照類(lèi)似圖片的規則進(jìn)行渲染呢？如果那樣，我們就達到目的了。

但是經(jīng)過(guò)測試，很遺憾，事實(shí)并不是這樣，加上label后跟沒(méi)加沒(méi)有任何區別。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，證明瀏覽器并沒(méi)有按照l(shuí)abel的高度值來(lái)去對齊中心點(diǎn)。如圖：

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

在FF3.5和IE7下面已經(jīng)很接近于我們希望的狀態(tài)了，只差1px。IE6下… 無(wú)語(yǔ)了。

經(jīng)過(guò)以上折騰，我得出了跟wheatlee相同的結論，就是，各種瀏覽器之間對這個(gè)問(wèn)題的處理貌似沒(méi)有任何規律。并且，似乎每一種瀏覽器對于 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ò)仔細總結和分析，發(fā)現好像最終對齊的結果跟label的高度和當前字體中小寫(xiě)x的中心點(diǎn)都有關(guān)系，兩者同時(shí)影響著(zhù)渲染結果(雖然不明白為什么會(huì )這樣)。那么，既然現在的情況以及非常接近于希望的狀態(tài)了，是否可以通過(guò)設置字體的方式來(lái)改變小寫(xiě)x的中心點(diǎn)的位置，進(jìn)而對垂直對齊的結果進(jìn)行“微調”呢？

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

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

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