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. Quartus ModelSim联合仿真中的RAM初始化

    Modelsim只支持Hex格式的初始化文件,文件需要放在仿真的根目录下,例如:.\simulation\modelsim:并且在利用Quartus宏生成IP时,选择的初始化文件必须用绝对路径!否则M ...

  2. [bzoj3226][Sdoi2008]校门外的区间——线段树

    题目 略 题解 直接套黄学长模板. Orz 代码 #include <bits/stdc++.h> using namespace std; #define ll long long #d ...

  3. SELinux 案例 2

    普通进程权限白名单 sepolicy generate --application [-n NAME] [-u USER ]command [-w WRITE_PATH ]

  4. Iframe跨域嵌入页面自动调整高度的办法

    http://www.a.com/A.html http://www.a.com/B.html http://www.a.com/D.js http://www.c.com/C.html A.html ...

  5. TensorFlow 官方文档中文版【转】

    转自:http://wiki.jikexueyuan.com/project/tensorflow-zh/ TensorFlow 官方文档中文版 你正在阅读的项目可能会比 Android 系统更加深远 ...

  6. Perl的Expect模块学习

    Perl的Expect模块学习 http://www.xuebuyuan.com/1852717.html

  7. JSP(2) - JSP指令 - 小易Java笔记

    JSP指令是给JSP引擎用的,即给服务器用的.作用是告诉服务器,该如何处理JSP中除了指令之外的内容.包括page.include.taglib三种 基本的语法格式:<%@ 指令名称 属性1=& ...

  8. html怎样让表格里面的内容居中

    html怎样让表格里面的内容居中 text-align:center; 在表格td中,有两个属性控制居中显示 align——表示左右居中——left,center,right valign——控制上下 ...

  9. selenium java读取csv文件 (数据驱动)

    javacsv2.1 下载地址:http://sourceforge.net/projects/javacsv/files/ 该链接可以下载java读取csv文件的jar 包.下载之后解压找到对应的. ...

  10. flask学习:如何从config里载入配置

    代码如下: 1.main.py from flask import Flask from config import DevConfig app=Flask(__name__) app.config. ...