作者：xidea 時間： 2009-07-27 文檔類型：原創(chuàng) 來自：藍色理想
第 1 頁 vertical-align表單元素垂直對齊 [1] 第 2 頁 vertical-align表單元素垂直對齊 [2] 第 3 頁 vertical-align表單元素垂直對齊 [3] 第 4 頁 vertical-align表單元素垂直對齊 [4]
經(jīng)過以上折騰，我得出了跟wheatlee相同的結(jié)論，就是，各種瀏覽器之間對這個問題的處理貌似沒有任何規(guī)律。并且，似乎每一種瀏覽器對于 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.”
但是經(jīng)過仔細總結(jié)和分析，發(fā)現(xiàn)好像最終對齊的結(jié)果跟label的高度和當前字體中小寫x的中心點都有關(guān)系，兩者同時影響著渲染結(jié)果(雖然不明白為什么會這樣)。那么，既然現(xiàn)在的情況以及非常接近于希望的狀態(tài)了，是否可以通過設(shè)置字體的方式來改變小寫x的中心點的位置，進而對垂直對齊的結(jié)果進行“微調(diào)”呢？
最終，在不斷的測試中發(fā)現(xiàn)，如果將font-family中的第一個字體設(shè)置為Tahoma，則可以完美的實現(xiàn)對齊(Verdana等字體也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均顯示正常。最終代碼如下：
運行代碼框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <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> </html> [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
最終效果：
至此，多選框(checkbox)和提示文字對齊的問題已經(jīng)解決，那么其他表單元素呢？試驗了一下單選框(radio)，發(fā)現(xiàn)，還是有問題。提示文字依然是偏上。用firebug看了一下，發(fā)現(xiàn)radio元素默認有5px的左邊距和3px的上、右邊距，卻沒有下邊距。如圖：
出處：藍色理想 責任編輯：bluehearts
上一頁 vertical-align表單元素垂直對齊 [2] 下一頁 vertical-align表單元素垂直對齊 [4]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
藍色理想版權(quán)申明：除部分特別聲明不要轉(zhuǎn)載，或者授權(quán)我站獨家播發(fā)的文章外，大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章，但原作者和來自我站的鏈接必須保留（非我站原創(chuàng)的，按照原來自一節(jié)，自行鏈接）。文章版權(quán)歸我站和作者共有。
轉(zhuǎn)載要求：轉(zhuǎn)載之圖片、文件，鏈接請不要盜鏈到本站，且不準打上各自站點的水印，亦不能抹去我站點水印。
特別注意：本站所提供的攝影照片，插畫，設(shè)計作品，如需使用，請與原作者聯(lián)系，版權(quán)歸原作者所有，文章若有侵犯作者版權(quán)，請與我們聯(lián)系，我們將立即刪除修改。
<p id="tbkqz"></p>
第 1 頁 
第 3 頁 vertical-align表單元素垂直對齊 [3]
