欢迎来到 jackNEss'窝窝
I like simple mind

基于vertical-align的表单元素垂直对齐方式研究

2011年09月07日

基于vertical-align的表单元素垂直对齐方式研究

最近在维护现有的项目,在整理表单模块这一块,发现了一个比较在意的地方:关于复选框(checkbox) 和 单选框(radio) 与文字之间垂直对齐的问题,正好有时间,所以拿出来研究下。

首先,经过测试发现,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大。

以下是测试代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>vertical-align test01</title>
<style type="text/css">
.label{
	padding:10px; 
	border:1px solid #1d77bc; 
	font-family:'\5b8b\4f53',sans-serif; 
	font-size:12px;
}
.label input{ vertical-align:middle;}
</style>
</head>
<body>
	<div class="label"><input type="checkbox"/> 我是测试文字</div>
</body>
</html>

从上图可以看出,即使设置了vertical-align:middle,也依然不能完美对齐。

blueidea 上 wheatlee 文章 《大家都对vertical-align的各说各话

wheatlee在他的文章中关于垂直居中提到了这样几个关键点:

  1. vertical-align:middle的时候,是该元素的中心对齐周围元素的中心。
  2. 这里“中心”的定义是:图片当然就是height的一半的位置,而文字应该是基于baseline往上移动0.5ex,亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em,以至于其实不一定是x的正中心。

按照 wheatlee 的说法,我决定先测试下浏览器对于 “复选框” 和图片是否使用同样的规则来渲染,即是否把复选框当成一个正方形来对待。

以下是测试代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>vertical-align test01</title>
<style type="text/css">
.label{
	padding:10px; 
	border:1px solid #1d77bc; 
	font-family:'\5b8b\4f53',sans-serif; 
	font-size:12px;
	position:relative;
	
}
.label input{ vertical-align:middle;}
.squ{vertical-align:middle;}
</style>
</head>
<body style="height:200px;">
	<div class="label"><input type="checkbox"/> <img class="squ" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="square.png" alt=""/> xtest</div>
</body>
</html>

代码中的 square.png 是一个尺寸和 复选框完全一致的 黑色图片。在Firefox 6.0 下显示是这样子的:

事实证明,Firefox 6.0 对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的,即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候,是该元素的中心对齐周围元素的 中心”的观点,如果我在复选框后面输入英文字符,那么复选框的中心将与英文中小写字母x的中心对齐。经测试,Firefox 6.0 下面基本上是这样的(在一些字号的 时候会有一定的误差,比如,如果字体高度是偶数,那么这个中心点有时在一半偏上1px,有时在一半偏下1px)。如图:

但是这对于中文来说,并不是一个好的结果。因为中文是方块字,并且相同字号的情况下,高度会比小写的x高出很多。所以,按照浏览器内置的方式,只用 vertical-align:middle是无论如何也无法对齐中文的(无论是只写中文,中文在前,英文在前,Firefox6.0 都是按照小写x中心那种方法来 对齐的。)。但是回头再看看wheatlee的文章,他说这个小写x中心对齐的渲染方式,是对于“文字”来说的。那么,如果不是文字呢…?如果复选框后面 跟的是一个行内元素,如label,而文字是写在它内部的,会是什么样呢?浏览器会不会将这个内联元素整体看作一个“块”,然后依照类似图片的规则进行渲 染呢?如果那样,我们就达到目的了。

所以,基于第一个例子新增了以下代码:

CSS部分:

.lab{ 
	verticla:middle;
	display:inline-block;  
	*display:inline; 
	*zoom:1;
}

HTML 部分:

<div class="label"><input type="checkbox"/> <label class="lab">我是测试文字x</label></div>

很遗憾,it does not work。

经过仔细总结和分析,发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系,两者同时影响着渲染结果。那么,既然现在的情况以及非常接近于希望的状态了,是否可以通过设置字体的方式来改变小写x的中心点的位置,接入对垂直对齐结果进行“微调”呢?

最终,在不断的测试中发现,如果将font-family中的第一个字体设置为Tahoma,则可以完美的实现对齐(Verdana等字体也可以)。而且在Firefox 6/IE6/IE7/IE8/IE9、Chrome、Opera、Safari中均显示正常。

以下是debug后的代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>vertical-align test01</title>
<style type="text/css">
.label{
	padding:10px; 
	border:1px solid #1d77bc; 
	font-family:Tahoma,'\5b8b\4f53',sans-serif; 
	font-size:12px;
	position:relative;
	
}
.label input{ padding:0; vertical-align:middle;}

</style>
</head>
<body>
	<div class="label"><input type="checkbox"/> 我是测试文字x</div>
</body>
</html>

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

不过,只要将那些边距去掉之后按照上面方法即可修复问题。

分类HTML + CSS
标签
阅读 1,261
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS