表单元素与文字对不齐的解决方案
我们在设计网页表单时，往往会发现一些表单元素无法与文字对齐，如复选框(checkbox)和单选框(radio)等等。如果你在多种浏览器上进行测试，应该会发现各种各样对不齐的情况，本文园子将重点探讨表单元素与文字对不齐的解决方案。
声明：本文的代码与图片均来源于蓝色理想，园子仅分享下，版权归原作者所有。
事实上很多网站在这方面做的都有所欠缺，多数都出现在内页里面，可能设计者也不太注重内页面的表现了吧，来看看截图：
多数网站的表单与文字并没有对齐
解决以上问题需要两步：
1.设置元素的对齐属性为：vertical-align:middle 。
我们有必要来了解下 vertical-align:middle 这个属性，其实vertical-align:middle 就是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心。
你可能会发现即使设置了vertical-align:middle这个属性，也会出现些偏差。那就需要进行第二步了。
2.设置字体为 Tahoma，设置所有元素的填充与边距为0。
我们需要将出现表单元素的字体设置为 Tahoma，并且把所有元素的填充与边距设置为0。这样的话就可以完美实现对齐了，并且测试在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。
css代码如下：
1 2 3 4 | *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} |
HTML代码：
1 2 | <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>测试文字x</label> |
大家可以自行测试下。
常用的表单元素与文字排版方式（仅供参考）
下面是一些常用表单元素与文字混排的代码，均完美实现了表单元素与文字的对齐，希望对朋友们有所帮助。先看效果：
网页中常用的表单元素实例
CSS代码：
1 2 3 4 | *{margin:0;} label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} |
HTML代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <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> |
原创文章如转载，请注明：转载自园子博客 [ http://www.yzznl.cn ]
感觉，博客的导航。一下子英文，一下子中文的不美观。！
很好很强大。
这个东西很有用，我要专研一下！
恩，很好的解决办法，一个细节的小问题，但是却很让人头痛
博主對美很有要求啊，真難得。
园子这好东西不少好好好学习
目前用不上
好好学习哦！
很少看到你玩代码哦。
打开了你的博客，我舍不得关，又来占个位置 ，嘿嘿！
嘿嘿来者都是学习者，谢谢分享心得。
字体改成tahoma那不是和其他字体不统一了
@疾风
其实是差不多的
看不出来分别。
园子博客已收录至我的“独立博客推介”，特此告知，呵呵。
查看地址：http://www.diyidu.cn/nav/
真要好好学习了
送IP送GG走人！！！！
带回去我 慢慢学习研究！
现在很多网站没有注意这些细节
学习了 你们这么牛淫们 都是设计网页高手
学些了，原来表格和CSS可以这样完美的结合~呵呵
学习了！
嘿嘿！我坐到沙发了哦！