vertical-align 表單元素垂直對齊的解決方法
我要評論
于是上網(wǎng)查看了一些網(wǎng)站，發(fā)現(xiàn)這個問題是普遍存在的，如下圖（FF3.5）：
在很多網(wǎng)站涉及到表單的頁面中，都存在這種表單元素與提示文字無法對齊的問題。于是打算研究一下這個問題。首先，搜索到了wheatlee前輩的文章《大家都對vertical-align的各說各話》。wheatlee在他的文章中關于垂直居中提到了這樣幾個關鍵點：
1、vertical-align:middle的時候，是該元素的中心對齊周圍元素的中心。
2、這里“中心”的定義是：圖片當然就是height的一半的位置，而文字應該是基于baseline往上移動0.5ex，亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個單位定義為0.5em，以至于其實不一定是x的正中心（baseline等名詞如果不懂，請先閱讀wheatlee的文章）
按照這個思路，對照我遇到的問題，首先想到的是先驗證一下瀏覽器對于“復選框”和圖片是不是使用同樣的規(guī)則來渲染（是不是把復選框當成一個正方形圖片來對待）。于是寫出下面的代碼：
<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下顯示如下：
相關文章
css中圖片于文本的基線對齊與vertical-align屬性設置
默認的情況是圖片頂對齊而文字底對齊，通過設置css屬性可以使得圖片與文字對齊，接下來為大家詳細介紹下設置各對象的vertical-align屬性，感興趣的朋友可以參考下哈2013-04-02css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時之需，感興趣的朋友可以了解下哦2013-01-09css vertical-align屬性的一些理解與認識(二) text-top篇
vertical-align是個相當復雜與精深的屬性，所理解的一些內容多少會有不準確之處,本集內容主要講講我對在一般情況下vertical-align其作用的理解，以及vertical-align相關的2013-01-07css vertical-align屬性的一些理解與認識(一)
就說說我對vertical-align屬性的一些理解吧，純屬個人見解，若有不準確之處還望見諒,若有不準確之處還望見諒。還有，vertical-align屬性牽扯到的知識實在是太多了，不是一2013-01-07line-height 和 vertical-align 行高與行對齊精解 （圖文）
行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的， 同時也受字號的影響。2010-08-27- div vertical-align不起作用解決辦法，其實主要是文檔聲明。2010-03-25
- 網(wǎng)頁制作Webjx文章簡介：最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現(xiàn)都各不相同。2009-04-02
CSS實例:vertical-align屬性讓網(wǎng)頁層居中
網(wǎng)頁制作Webjx文章簡介：CSS實例:vertical-align屬性讓網(wǎng)頁層居中. vertical-align屬性使網(wǎng)頁層居中 網(wǎng)頁源代碼如下： <html> <2009-04-02- vertical-align屬性詳細分析 最近幾天仔細研究了一下vertical-align這個屬性，結果讓我大吃一驚，這個很“資深”的CSS標準竟然在各個瀏覽器里面的表現(xiàn)都各不相同2009-02-10
IE6下 vertical-align:middle 和 height 引發(fā)的邊框消失
css樣式： <style type="text/css"> ul{ list-style:none;} li,div{border:1px solid #ff0000; vertical-align:middle; height:50px;} </style> ht2009-02-05