checkbox垂直对齐
程序员文章站
2022-07-08 19:18:21
...
今天项目中出现了一个checkbox不能对齐的问题，检查良久，发现出现的原因是因为checkbox被设置了高度为24px导致文字和checkbox不能对齐，做了几次测试后总结如下:
1 checkbox 和radio两个标签的默认高宽都是13px，但是在Firefox和IE中 margin和padding的默认值不一样，因此必须先统一设置margin和padding为0
2 checkbox 和radio如果被设置了高度，那么高度越高，垂直居中的偏差就越大
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>垂直居中</title>
<style type="text/css">
label{height:13px;}
</style>
</head>
<body>
<table >
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="margin:0px;padding:0px
" />
<label for="1">默认高度垂直居中</label>
</td>
</tr>
<tr>
<td height="50px ">
<input id="1" type="checkbox" style="height:48px;margin:0px;padding:0px
" />
<label for="1">设置高度垂直居中</label>
</td>
</tr>
</table>
</body>
</html>
下一篇： div盒子居中