您的当前位置：首页单选框和复选框与文本垂直对齐_html/css

单选框和复选框与文本垂直对齐_html/css

来源：环舟情感网

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

html 结构：

radio-and-checkbox-and-text-vertical-align

单选框

解决方法一

解决方法二

解决方法三

复选框

解决方法一

解决方法二

解决方法三

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

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