文字和表单（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>

 

posted @ 2016-06-03 12:01  键盘达人  阅读(2596)  评论(0)  编辑  收藏  举报