原文地址：http://www.blueidea.com/tech/web/2009/6910.asp

　　最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示：

　　于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）：

　　在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》（也已转载到本博客）。wheatlee在他的文章中关于垂直居中提到了这样几个关键点：

　　1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。

　　2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（baseline等名词如果不懂，请先阅读wheatlee的文章）

　　按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码：

<style>

body{font-size:12px;}

</style>

<input style="vertical-align:middle;" name="test" type="checkbox">

<img style="vertical-align:middle;"  src="testpic.gif" />

测试文字

　　代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

　　事实证明，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中均显示正常。最终代码如下：

<!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>

　　最终效果：

　　至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：

　　于是，尝试去掉radio的外边距，刷新后显示正常。（其实多选框checkbox也是有外边距的，只是它的外边距四个方向都有，并且相等，所以对于垂直对齐没有影响。）下图是一些常用表单元素的最终显示效果以及最终代码，大家可以用不同浏览器看一下实际的效果（注：由于演示使用的12px的中文实际只有11px高，而 IE下文本框等元素的高度是22px，一个是奇数，一个是偶数，所以这些部分在IE中是无论如何也对不齐的，差1px。如果手动控制文本框高度为奇数，或者将文字设置成为偶数的高度，则显示正常）：

<!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>测试vertical-align</title>

<style>

*{margin:0;}

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>

<br/><br/>

<input class="inputcheckbox " name="test2" value="2" type="radio">

<label>测试文字x</label>

<br/><br/>

<input class="inputcheckbox " name="Text1" type="text" />

<label>文字</label>

<input  class="inputcheckbox " name="Text1" type="text" />

<label>文字</label>

<br/><br/>

<label>测试文字</label>

<input   class="inputcheckbox " name="Button1" type="button" value="按钮" />

<br/><br/>

<select class="inputcheckbox " name="Select1">

<option>测试文字</option>

</select>

<label>测试文字</label>

</html>

　　而且我发现，不但解决了中文的问题，如果提示信息换成其他语言，基本上也能够对齐，至少不会像开始那样偏移太多。下面是截图、代码和一些例子：

<!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>测试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>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>這是繁體中文</label>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>次回から自動的にログイン</label>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>English</label>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>Чужой компьютер</label>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>صفحات من ‏السعودية </label>

<br/>

<input class="inputcheckbox " name="test" value="1" type="checkbox">

<label>회원가입</label>

<br/>

<input class="inputcheckbox" name="test" value="1" type="checkbox">

<label>הפתוח</label>

<br/>

</html>

　　至此，我的研究过程告于段落。

　　但是，还是想不通各浏览器为什么最后会显示出这样的效果，其中的原理是什么。牛人们有空可以解释一下吗？

　　原文： http://www.hplus.org.cn/blog/2009/07/143

vertical-align表单元素垂直对齐的更多相关文章

  1. input、select等表单元素的对齐问题

    今天在写页面时,发现了一个问题,当INPUT.SELECT及用图片做的button放在一起(并排放一起)时,没法子对齐,自己以不愿再加其他代码.也不愿使用JS来实现图片button的效果,试好半天,发 ...

  2. 文字和表单（checkbox/radio）元素垂直对齐方法，兼容Firefox和IE。

    这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何 ...

  3. [转]CSS 表单元素对齐详解

    来源:http://blog.sina.com.cn/s/blog_655388ed0100lzyk.html 简单的设置input{vertical-align:middle}即可,完美的: lab ...

  4. HTML之表单元素

    A.表单元素都是放在<form></form>标签内的.来看看表单的属性  属性 值 描述 accept MIME_type 规定通过文件上传来提交的文件的类型 accept- ...

  5. 详解HTML中的表单元素

    代码详讲: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  6. 基于div表单模拟右对齐

    基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...

  7. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  8. 【CSS学习】--- 文本水平对齐属性text-align和元素垂直对齐属性vertical-align

    一.文本水平对齐属性---text-align text-align属性是将块级标签以及单元格里面的内容进行相应的对齐,块级标签里的内联元素会被整体进行移动,而子块级元素或子单元格则会继承父元素的te ...

  9. PHP（表单元素）

    表单: 1.收集用户的输入,发送到后台 <form action="后台地址" method="提交方式" enctype="multipart ...

随机推荐

  1. DevExpress v17.2新版亮点—.NET Reporting篇（二）

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了.NET Reporting v17.2 的新功能,快来下载试用新版本! 支持AS ...

  2. MyEclipse移动开发教程：迁移HTML5移动项目到PhoneGap（二）

    MyEclipse开年钜惠 在线购买低至75折!立即开抢>> [MyEclipse最新版下载] 二.将文件从HTML5项目复制到PhoneGap项目中 1. 在HTML5 app项目的ww ...

  3. MyEclipse WebSphere开发教程：WebSphere 7安装指南（四）

    [周年庆]MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] 六.管理配置文件 现在您已经安装了WebSphere 7的所有更新,您必须创建一个配置文 ...

  4. php require include 区别

    php提供了两种包含外部文件的方法:include()和require().include()语句是一个常规的php函数:而require() 是一种特殊的语言结构,它的使用受到一些限制.对这两者来说 ...

  5. Vue 2.0 学习路线

    「 Vue很难学吗 」 对于我这种从0.x版本就开始体验 vuejs 的人来说,当然不算难,那时候没各种脚手架和复杂搭配,仅仅是一个mvvm的解决方案库而已,解决了jq带来的繁琐操作dom痛点,所以就 ...

  6. Mac OS 基于 VirtualEnv 的安装 tensorflow 1.3.0

    如果不行的话,就用conda装吧 https://www.jianshu.com/p/d54546ab315e 推荐使用 virtualenv 创建一个隔离的容器, 来安装 TensorFlow. 这 ...

  7. Nginx+Keepalive实现高可用负载均衡

    1.准备2台服务器 服务器名LB1,假设IP为192.168.1.100 服务器名LB2,假设IP为192.168.1.101 2.在LB1,LB2上分别安装Nginx 步骤参照:http://blo ...

  8. CodeForces - 457C：Elections（三分）

    You are running for a governor in a small city in Russia. You ran some polls and did some research, ...

  9. windows dos命令

    dos命令配置环境变量: path=%path%;D:\Installed software\Professional software\Python27   (https://www.cnblogs ...

  10. mysql 常用linux命令

    ★ 数据导出命令 D:\Program Files\MySQL\MySQL Server 5.6.39\bin 导出:  mysqldump -u root -p cela_sub > D:/d ...