今天项目中出现了一个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>
分享到：
相关推荐
表单元素input、文字完美垂直居中对齐方法.
为了使表单元素和文字都垂直居中对齐，当文本框和下拉框都没问题，但是单选框和复选框就了，经过反复测试终于完整搞定与大家分享，感兴趣的各位可不要错过了哈
最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使...
7.5.6 表格标题的垂直对齐方式——align 140 7.6 调整单元格属性 141 7.6.1 单元格大小——width、height 141 7.6.2 单元格水平跨度——colspan 142 7.6.3 单元格垂直跨度——rowspan 143 7.6.4 ...
一、前言vertical-align...2.vertical-align图片和文字对齐兼容性问题？3.vertical-align属性值各浏览器兼容性？4.vertical-align如何实现图片的垂直居中？5.vertical-aling如何实现input[type=’checkbox’],input[typ
NEAT 开 发 指南 文档 适用于 PT80 系列 移动数据终端 版本记录 版本号 版本描述 发布日期 V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册.....................................
复选框（Checkbox） 258 单选按钮（Radio） 259 用法 260 选项 260 方法 260 Bootstrap 折叠（Collapse）插件 264 用法 267 选项 267 方法 268 事件 271 Bootstrap 轮播（Carousel）插件 274 实例 274 用法 277 选项...
增加一根水平线，size为5px，宽度为50%，居中对齐，颜色为红色(red) 7、预格式化 作用：保留源文档中的回车 和 空格 的作用 <pre></pre> 8、分区元素 1、块分区元素 语法：<div></div> 作用：布局 2、行内...
2.3.6 CheckState属性——设置CheckBox控件的状态 193 2.3.7 ComboBox控件——下拉组合框控件 194 2.3.8 DomainUpDown控件——上下选择控件 195 2.3.9 DropDownStyle属性——指定组合框样式的值 197 2.3.10 ...
Visual C++MFC入门教程 目录 +-- 第一章 VC入门 |------ 1.1 如何学好VC |------ 1.2 理解Windows消息机制 |------ 1.3 利用Visual C++/MFC开发Windows程序的优势 |------ 1.4 利用MFC进行开发的通用方法介绍 ...
44.如何使图A的文字产生图B向左对齐的效果？ A. 将光标放在每一行文字的开头或结尾的位置，打开Text菜单下Align级联菜单Align left命令。 B. 将光标放在每一行文字的开头或结尾的位置，按快捷键Ctrl+Shift+L。 C....