vertical-align表单元素垂直对齐（3）

最新推荐文章于 2025-09-13 16:30:39 发布

xjinza

最新推荐文章于 2025-09-13 16:30:39 发布

阅读量393

点赞数

分类专栏： css 文章标签： xhtml firebug 浏览器测试 chrome class

css 专栏收录该内容

89 篇文章

订阅专栏

本文探讨了不同浏览器对vertical-align:middle属性的不同解析方式，并提供了一种通过设置字体来调整垂直对齐的方法，适用于多种浏览器。

经过以上折腾，我得出了跟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中均显示正常。最终代码如下：

代码：

<!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/xhtm">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试vertical-align</title>
<style>
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle;}
body{font-family:tahoma;font-size:12px;}
</style>
</head>
<body>
<input class="inputcheckbox" name="test" value="1" type="checkbox">
<label>测试文字x</label>
</html>