文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。相关的知识，希望对你有一定的参考价值。
这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题，要不是checkbox上浮了，要不是文字上浮。在前端开发过程中，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。
解决办法：
1、文字大小必须是偶数，比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。
案例：
<!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/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <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> </body> </html>
以上是关于文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。的主要内容，如果未能解决你的问题，请参考以下文章
[ HTML5 表单样式 checkbox | radio ] 自定义checkbox 与radio样式实现思路
表单的一些操作（checkbox radio select）