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

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

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