表單元素與提示文字無法對齊的問題
我要評論最近的項(xiàng)目涉及到很多表單的制作，特別是復(fù)選框(checkbox)和單選框(radio)。但是在前端開發(fā)過程中發(fā)現(xiàn)，單(復(fù))選框和它們后面的提示文字在不進(jìn)行任何設(shè)置的情況下，是無法對齊的，而且在Firefox和IE中相差甚大。即使設(shè)置了vertical-align:middle，也依然不能完美對齊。如下圖所示：
于是上網(wǎng)查看了一些網(wǎng)站，發(fā)現(xiàn)這個問題是普遍存在的，如下圖（FF3.5）：
在很多網(wǎng)站涉及到表單的頁面中，都存在這種表單元素與提示文字無法對齊的問題。于是打算研究一下這個問題。首先，搜索到了wheatlee前輩的文章《大家都對vertical-align的各說各話》。wheatlee在他的文章中關(guān)于垂直居中提到了這樣幾個關(guān)鍵點(diǎn)：
1、vertical-align:middle的時候，是該元素的中心對齊周圍元素的中心。
2、這里“中心”的定義是：圖片當(dāng)然就是height的一半的位置，而文字應(yīng)該是基于baseline往上移動0.5ex，亦即小寫字母“x”的正中心。但是很多瀏覽器往往把ex這個單位定義為0.5em，以至于其實(shí)不一定是x的正中心（baseline等名詞如果不懂，請先閱讀wheatlee的文章）
按照這個思路，對照我遇到的問題，首先想到的是先驗(yàn)證一下瀏覽器對于“復(fù)選框”和圖片是不是使用同樣的規(guī)則來渲染（是不是把復(fù)選框當(dāng)成一個正方形圖片來對待）。于是寫出下面的代碼：
<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是一個尺寸與復(fù)選框完全一樣的黑色圖片。FF3.5下顯示如下：
相關(guān)文章
- 為了使表單元素和文字都垂直居中對齊，當(dāng)文本框和下拉框都沒問題，但是單選框和復(fù)選框就了，經(jīng)過反復(fù)測試終于完整搞定與大家分享，感興趣的各位可不要錯過了哈2013-03-21
checkbox與文字混排無法對齊導(dǎo)致不美觀的解決方法
checkbox與文字不對齊會影響美觀本文將將介紹解決方法：需要checkbox居中對其 然后文字也要居中對齊，checkbox在FF和IE下表現(xiàn)不一樣;不管你怎么設(shè)置默認(rèn)的margin和padding2013-01-21- 修改圖片大小對齊間隔邊框?qū)傩?這些操作在開發(fā)過程中很常見，也很實(shí)用，本文對此進(jìn)行詳細(xì)介紹下，感興趣的朋友可以了解下啊2013-01-20
css 垂直對齊 css中vertical-align屬性(垂直對齊)的使用說明
這兩天寫個頁面css的時候用到了vertical-align屬性，使用過程中踩到了坑,因此整理了一些，以備不時之需，感興趣的朋友可以了解下哦2013-01-09div中加入span右對齊后出現(xiàn)換行顯示兩種解決思路
div中加入span右對齊后，出現(xiàn)了換行問題，一般思路的話一定是認(rèn)為通過分開兩列，一個align=left,另一個align=right；很是疑惑，于是利用閑暇時間，搜索整理下，曬出來 2012-12-19 css span右對齊 css li標(biāo)簽中span日期靠右布局實(shí)現(xiàn)代碼
在網(wǎng)頁布局中經(jīng)常會碰到新聞標(biāo)題靠左日期靠右，想要實(shí)現(xiàn)這種布局效果，需要在代碼上下點(diǎn)功夫，本人比較上心，也遇到此問題，于是搜集整理一下，需要的朋友可以參考下2012-12-18怎樣對齊文本框和圖像(image)按鈕實(shí)現(xiàn)三點(diǎn)一線
一個文本框旁邊一個按鈕是很經(jīng)常用到的網(wǎng)頁內(nèi)容，比如搜索框等等，而如果旁邊的按鈕使用圖像的話，他們豎直方向就很不容易對齊,這一直是大家所頭疼的問題，于是搜集整理一2012-12-11表單元素radio select對齊與IE6下雙邊距問題解決方案
之前一直困擾自己的一個問題就是表單內(nèi)radio、select等的對齊問題，搞得自己相當(dāng)惱.今天終于花了些時間找到了好的解決方法.也希望能夠幫到跟我同樣聞form色變的人2012-12-07網(wǎng)頁中form表單的元素會出現(xiàn)一些問題：比如文本域和按鈕對齊問題,這個問題會影響到界面的美觀度，本文將介紹如何解決此類問題，需要了解的朋友可以參考下2012-11-30表單元素input、文字完美垂直居中對齊方法.2012-07-11最新評論