radio和图片对齐_复选框(checkbox)和单选框(radio)与文字水平垂直居中对齐的解决方法...

今天项目中出现了一个checkbox与同一行的文字不能对齐的问题，检查后发现个问题，checkbox和radio两个标签的默认高宽都是13px，而项目中使用的字体大小却是12px，如果将字体调整为14px就不存在这个问题了，于是作者根据网上查到的资料整理了几种解决办法。先发一下具体的问题情况以及解决后的效果：

具体解决代码如下：

body{font-size:12px;}

div{float:left;width:110px;}

input{margin:0;padding:0;}

.input1{vertical-align:text-bottom;margin-bottom:-1px;*margin-bottom:-4px;}

.input2{height:13px;vertical-align:text-top;margin-top:0;}

.input3{height:15px;vertical-align:bottom;margin-bottom:-1px;margin-bottom:-2px\9;*margin-bottom:0px;}

.input4{height:14px;vertical-align:top;margin-top:1px;margin-top:0\9;}

.input5{vertical-align:middle;margin-top:-2px;}

.input6{vertical-align:-3px;}

一般的情况

复选框    单选框

单选框

解决方法一

解决方法二

解决方法三

解决方法四aerchi.com

解决方法五

解决方法六

复选框

解决方法一

解决方法二

解决方法三

解决方法四

解决方法五

解决方法六