单选框和复选框与文本垂直对齐_html/css_WEB-ITnose

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框与文本垂直居中对不齐，解决方法有很多，今天我整理了下最常用的 3 种方法。

html 结构：

        
单选框
        
解决方法一
        
解决方法二
        
解决方法三
        
复选框
        
解决方法一
        
解决方法二
        
解决方法三
    

scss：

@charset "utf-8";@import "core/config";@import "core/reset";.demo {    margin:50px;    font-size:12px;    font-family:SimSun;    h2 {        font-size:20px;    }    p {        margin:20px;        input {            margin-right:5px;        }        .input1 {            height:13px;            margin-top:0;            vertical-align:text-top;        }        .input2 {            margin-top:-2px;            vertical-align:middle;        }        .input3 {            vertical-align:-3px;        }    }}

效果如图所示：

测试浏览器：chrome，firefox，ie7-10

参考资料： 复选框单选框与文字对齐问题的研究与解决