我们前台开发的朋友可能会经常碰到关于在ie/ff中复选框(checkbox)和单选框(radio)等表单与文字对齐不了，下面我们来看看如何解决这个问题。
解决办法：
1、文字大小必须是偶数，比如12PX。
2、将文字加上label标签并且也添加vertical-align:middle样式。
3、然后去除表单元素的边距。
案例：
效果图
| 代码如下 |
|
|
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
|
其它的表单元素
效果图
| 代码如下 |
|
|
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试vertical-align</title>
<style>
*{margin:0;}
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="test2" value="2" type="radio">
<label>测试文字x</label>
<br/><br/>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<input class="inputcheckbox " name="Text1" type="text" />
<label>文字</label>
<br/><br/>
<label>测试文字</label>
<input class="inputcheckbox " name="Button1" type="button" value="按钮" />
<br/><br/>
<select class="inputcheckbox " name="Select1">
<option>测试文字</option>
</select>
<label>测试文字</label>
</html>
|
上面我们主要用到了vertical-align方法来帮你解解决了文字和表单元素不能垂直对齐问题，有需要的朋友可参考一下。
