checkbox 在chrome 和 firefox中 间距是由margin撑开, IE中则是由padding,并且无法设置边框;
 

主要参考大神的博客,http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%8D%E9%80%89%E6%A1%86%E6%88%96%E5%8D%95%E9%80%89%E6%A1%86%E4%B8%8E%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90%E7%9A%84%E9%97%AE%E9%A2%98%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E4%B8%80/

测试了一下效果,最后总结出:
方法从上到下按实现效果的程度排列,例方法一为最优选;
方法一:对任何大小的字体都有效
    首先复选框后面的文字字体须是”Tahoma”(可以称之为“她好吗”字体方便记忆),然后复选框的样式是.checkbox{vertical-align:middle; margin-top:0;}
    效果: chrome中显示居中,  IE10/9/8显示居中, IE11/7稍稍偏上1个像素

<div style="font-size: 16px; font-family: Tahoma;">
<input type="checkbox" style="vertical-align:middle; margin-top:0;" onchange="check()">不记住密码222
</div>
 
方法二:(对12px字体有效,其他字号大小请修改具体数值)
    给input[checkbox]设置 vertical-align:-2px;
    效果:IE/chrome 基本都能正常显示,可能会稍微偏上1个像素;
 
方法三:(对12px字体有效,其他字号大小请修改具体数值)
     给input[checkbox]设置 vertical-align:middle; margin-top:-2px; margin-bottom:1px;
    效果都还可以;
 
这也是一直会遇到的问题,只是对大神文章的梳理,以上3种方法为最新适用的,毕竟大神的文章是很久以前写的

checkbox与文字对齐方式(同样可用于radio单选框)的更多相关文章

  1. radio 和checkbox与文字对齐问题

    今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...

  2. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. C# Excel 中设置文字对齐方式、方向和换行

    在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...

  4. checkbox与文字对齐

    checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式: vertical-align:middle;

  5. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  6. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  7. [WPF打印]WPF 文档元素(Run TextBlock Paragraph)的文字对齐方式

    最近开发WPF程序,需要打印,用到了FlowDocument(这相当于有了打印模版,而且可以随时修改,真的是挺方便的).可是在输出表格形数据(这种情况恐怕是大多数~)时遇到了点儿麻烦. 由于Table ...

  8. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  9. vertical-align:middle;一般用于img和行内文字对齐方式

    vertical-align:top ;文字和行内块元素的顶部对齐 vertical-align:middle;居中 vertical-align:bottom;底对齐

随机推荐

  1. java消息中间件入门

    消息中间件来解耦服务调用 比如1个登录系统,登录的话需要调用很多系统的其他服务,如果中间调用失败,可能会导致登录信息一致无法返回,同时也增加了系统的耦合度.而用消息中间件的话,则是不发送服务到其他系统 ...

  2. HDFS的xshell及dfsadmin命令

    一. DFS:distributied file system 是一种允许文件通过网络在多台主机上风向的文件系统,可让多机器上的多用户分享文件和存储空间 二.HDFS的shell **切记后面加的 / ...

  3. 哈希Hash在字符串中的应用_C++

    本文含有原创题,涉及版权利益问题,严禁转载,违者追究法律责任 哈希大家都会用撒,字符串显然都会写撒,那么哈希离散化字符串不就懂了?!(XXX的神逻辑,其实原文是:树都晓得吧,数组显然都会开呀,那么恭喜 ...

  4. [转]如何整理Linux磁盘碎片,竟与Windows的方式大不同 返回操作系统首页

    Linux 系统永远不需要整理磁盘碎片的神话相信很多人都听说过.由于 Linux 采用了优秀的日志文件系统(ext2.ext3.ext4, btrfs等),在绝大多数情况下确实是不需要进行磁盘碎片整理 ...

  5. 【Sqlite3】SQLITE3使用总结(转)

    原文转自 https://www.cnblogs.com/wenxp2006/archive/2012/06/04/2535169.html SQL语句操作 介绍如何用sqlite 执行标准 sql  ...

  6. POJ1236 (强连通分量缩点求入度为0和出度为0的分量个数)

    Network of Schools Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13804   Accepted: 55 ...

  7. JQ子页面对父页面的元素进行操作

    需要加上parent.document,才能找到父页面的元素 如: $("#tabs", parent.document).click();

  8. 该配置节不能包含 CDATA 或文本元素

    当执行程序时报“该配置节不能包含 CDATA 或文本元素” ,有可能是你的web.config中有异常的文本节点,比如

  9. delphi.指针.应用----应用重要 多看 多练

    来自:http://www.cnblogs.com/qiusl/p/4026459.html ----------------------------------------------------- ...

  10. SVN代码提交

    SVN代码提交(转载) 原文链接:http://www.softown.cn/post/100.html 1.SVN代码提交 1) 原则 先更新再提交: SVN是为了多人协同开发而产生的,如果你在提交 ...