复选框和单选框与文字水平垂直居中对齐的解决方法-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

复选框和单选框与文字水平垂直居中对齐的解决方法

Dec 04, 2017 pm 01:10 PM

menegak kotak semak tahap

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

先发一下具体的问题情况以及解决后的效果：

&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
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;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h2&gt;一般的情况&lt;/h2&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; /&gt;复选框&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input type=&quot;radio&quot; /&gt;单选框&lt;/p&gt;
&lt;div&gt;
&lt;h2&gt;单选框&lt;/h2&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input1&quot;/&gt;解决方法一&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input2&quot;/&gt;解决方法二&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input3&quot;/&gt;解决方法三&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input4&quot;/&gt;解决方法四phpernote.com&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input5&quot;/&gt;解决方法五&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;radio&quot; class=&quot;input6&quot;/&gt;解决方法六&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;h2&gt;复选框&lt;/h2&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input1&quot;/&gt;解决方法一&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input2&quot;/&gt;解决方法二&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input3&quot;/&gt;解决方法三&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input4&quot;/&gt;解决方法四&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input5&quot;/&gt;解决方法五&lt;/p&gt;
&lt;p&gt;&lt;input type=&quot;checkbox&quot; class=&quot;input6&quot;/&gt;解决方法六&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;