vertical-align表单元素垂直对齐（2）
作者：xidea 来源：蓝色理想 发布时间：2009-07-27 13:02:00
事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：
但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。
但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：
如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：
在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。
经过以上折腾，我得出了跟wheatlee相同的结论，就是，各种浏览器之间对这个问题的处理貌似没有任何规律。并且，似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”
但是经过仔细总结和分析，发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系，两者同时影响着渲染结果(虽然不明白为什么会这样)。那么，既然现在的情况以及非常接近于希望的状态了，是否可以通过设置字体的方式来改变小写x的中心点的位置，进而对垂直对齐的结果进行“微调”呢？
最终，在不断的测试中发现，如果将font-family中的第一个字体设置为Tahoma，则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下：
运行代码框
最终效果：
至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：
0
投稿猜你喜欢
介绍也许大多数人都有在Excel中使用数据透视表的经历，其实Pandas也提供了一个类似的功能，名为pivot_table。虽然pivot_- 前言金融行业的Python学习，不同于IT系统开发，我们并不需要达到程序员的水平。然而，学会Python可以让你实现一个人写完一个交易系统的
- 一、简述MySQL版本从5直接 * 到8，相信MySQL8一定会有很多令人意想不到的改进，如果不想只会CRUD可以看看。比如系统表引擎的变化
- SQLServer中开启CDC之后，在某些情况下会导致事务日志空间被占满的现象为：在执行增删改语句（产生事务日志）的过程中提示，The tr
- numpy.mean计算矩阵均值计算矩阵的均值>>> a = np.array([[1, 2], [3, 4]])>
- Javascript中的变量同样支持自由类型转换成为适用(或者要求)的内容以便于使用。 弱类型的Javascript不会按照程序员的愿望从实
- Numpy提供了几种数据保存的方法。以3*4数组a为例：1. a.tofile("filename.bin")这种方法只
- SQL Server的彻底卸载与再次安装可能大家已经有深刻体会，SQL Server的卸载十分繁琐。最让人头疼的是，出了问题的SQL Ser
- 问题背景两张表一张是用户表a(主键是int类型)，一张是用户具体信息表b（用户表id字段是varchar类型）。因为要显示用户及用户信息，所
- 今天我遇到一个问题，MySQL企业版备份引起I/O子系统负载过大，应用响应缓慢，导致系统不可用。所以我想限制mysqlbackup的进程，使
- 一、需求：有三张表，学生表、成绩表和课程表，我们可以通过连表查询出学生姓名、课程及对应的成绩： 所需表sql-- -------------
- 对于程序开发新手来说，一个最常见的困惑是测试的主题。他们隐约觉得“单元测试”是很好的，而且他们也应该做单元测试。但他们却不懂这个词的真正含义
- 晚上帮同学用Python脚本绘图，大概需求是读取一个txt文件的两列分别作为x和y的值，绘图即可，代码如下：#coding:utf-8imp
- 1.常用数据结构之列表我们先给大家一个编程任务，将一颗色子掷6000次，统计每个点数出现的次数。这个任务对大家来说应该是非常简单的，我们可以
- 项目有时要用一些Ajax的效果，因为比较简单，也就没有去用什么Ajax.net之类的东西，手写代码也就实现了。 第二天，有人反馈错
- 错误15105，从网上找了一些解决方案，一般都是说文件的权限不足的问题，当然附加的时候必须是有数据库附加权限才可以操作的。解决办法1：给相应
- --sql语句就用下面的存储过程 /*--数据导出Excel导出查询中的数据到Excel,包含字段名,文件为真正的Excel文件,如果文件不
- 本文实例为大家分享了OpenCV实现图片亮度增强或减弱的具体代码，供大家参考，具体内容如下对每个像素点的三通道值进行同步放大，同时保持通道值
- Pandas是一个用于数据分析和操作的Python库。在pandas中几乎所有的操作都围绕着DataFrame。Dataframe是一个二维
- Go 语言教程Go 是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。Go是从2007年末由Robert Griesemer,
