[轉]CSS 表單元素對齊詳解

時間 2019-11-08

標籤 css 表單元素對齊詳解欄目 CSS 简体版

原文原文鏈接

來源：http://blog.sina.com.cn/s/blog_655388ed0100lzyk.htmlhtml

簡單的設置input{vertical-align:middle}便可，完美的：瀏覽器

label {
    vertical-align: middle
}
input {
    vertical-align: middle;
}
body {
    font-family: tahoma Verdana;
    font-size: 12px;
}

詳細講解開始啦~~~測試

單(復)選框和它們後面的提示文字在不進行任何設置的狀況下，是沒法對齊的，並且在Firefox和IE中相差甚大。即便設置了vertical-align:middle，也依然不能完美對齊。以下圖所示：字體

這個問題是廣泛存在的：spa

wheatlee前輩的文章《你們都對vertical-align的各說各話》。wheatlee在他的文章中關於垂直居中提到了這樣幾個關鍵點：code

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

二、這裏「中心」的定義是：圖片固然就是height的一半的位置，而文字應該是基於baseline往上移動0.5ex，亦即小寫字母「x」的正中心。可是不少瀏覽器每每把ex這個單位定義爲0.5em，以致於其實不必定是x的正中心（baseline等名詞若是不懂，請先閱讀wheatlee的文章）blog

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

<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下顯示以下：get

事實證實，FF3.5對於複選框和圖片的垂直對齊方式是採用一樣的規則進行渲染的，即將複選框看成一個正方形的圖片(IE不是)。按照 wheatlee「middle的時候，是該元素的中心對齊周圍元素的中心」的觀點，若是我在複選框後面輸入英文字符，那麼複選框的中心將與英文中小寫字母x的中心對齊。經測試，FF3.5下面基本上是這樣的(在一些字號的時候會有必定的偏差，好比，若是字體高度是偶數，那麼這個中心點有時在通常偏上 1px，有時在一半偏下1px)。如圖：

可是這對於中文來講，並非一個好的結果。由於中文是方塊字，而且相同字號的狀況下，高度會比小寫的x高出不少。因此，按照瀏覽器內置的方式，只用 vertical-align:middle是不管如何也沒法對齊中文的（不管是隻寫中文，中文在前，英文在前，FF3.5都是按照小寫x中心那種方法來對齊的）。可是回頭再看看wheatlee的文章，他說這個小寫x中心對齊的渲染方式，是對於「文字」來講的。那麼，若是不是文字呢…？若是複選框後面跟的是一個行內元素，如label，而文字是寫在它內部的，會是什麼樣呢？瀏覽器會不會將這個內聯元素總體看做一個「塊」，而後依照相似圖片的規則進行渲染呢？若是那樣，咱們就達到目的了。

可是通過測試，很遺憾，事實並非這樣，加上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中均顯示正常。最終代碼以下：

<title>測試vertical-align</title>
<style>
label {
    vertical-align: middle
}
.inputcheckbox {
    vertical-align: middle;
}
body {
    font-family: tahoma;
    font-size: 12px;
}
</style>
</head><body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>測試文字x</label>

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

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

<style>
* {
    margin: 0;
}
label {
    vertical-align: middle
}
.inputcheckbox {
    vertical-align: middle;
}
body {
    font-family: tahoma;
    font-size: 12px;
}
</style>
</head><body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>測試文字x</label>
<br/>
<br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>測試文字x</label>
<br/>
<br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/>
<br/>
<label>測試文字</label>
<input class="inputcheckbox " name="Button1" type="button" value="按鈕" />
<br/>
<br/>
<select class="inputcheckbox " name="Select1">
  <option>測試文字</option>
</select>
<label>測試文字</label>

並且我發現，不但解決了中文的問題，若是提示信息換成其餘語言，基本上也可以對齊，至少不會像開始那樣偏移太多。下面是截圖、代碼和一些例子：

<style>
label {
    vertical-align: middle
}
.inputcheckbox {
    vertical-align: middle;
}
body {
    font-family: tahoma;
    font-size: 12px;
}
</style>
</head><body>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>測試文字x</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>這是繁體中文</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>次回から自動的にログイン</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>English</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>Чужой компьютер</label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>صفحات من ‏السعودية </label>
<br/>
<input class="inputcheckbox " name="test" value="1" type="checkbox">
<label>회원가입</label>
<br/>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>הפתוח</label>