vertical-align表单元素垂直对齐(3)
2011-08-06 11:34
330 查看
经过以上折腾,我得出了跟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>
最终效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/e84cba3b5123dd4ee0c28a7af907bdd6.gif)
至此,多选框(checkbox)和提示文字对齐的问题已经解决,那么其他表单元素呢?试验了一下单选框(radio),发现,还是有问题。提示文字依然是偏上。用firebug看了一下,发现radio元素默认有5px的左边距和3px的上、右边距,却没有下边距。如图:
但是经过仔细总结和分析,发现好像最终对齐的结果跟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>
最终效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/e84cba3b5123dd4ee0c28a7af907bdd6.gif)
至此,多选框(checkbox)和提示文字对齐的问题已经解决,那么其他表单元素呢?试验了一下单选框(radio),发现,还是有问题。提示文字依然是偏上。用firebug看了一下,发现radio元素默认有5px的左边距和3px的上、右边距,却没有下边距。如图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/13/f7b232e1eb5d17377f797b229016551c.gif)
相关文章推荐
- vertical-align表单元素垂直对齐
- 基于vertical-align的表单元素垂直对齐方式研究
- vertical-align表单元素垂直对齐(2)
- vertical-align表单元素垂直对齐(4)
- 基于vertical-align的表单元素垂直对齐方式研究 By 小强 @ 2009年10月27日 [ 前端表现 ]
- vertical-align 表单元素垂直对齐的解决方法
- 基于vertical-align的表单元素垂直对齐方式研究
- vertical-align 属性设置元素的垂直对齐方式。
- 利用vertical-align:middle实现行内元素的水平垂直居中对齐
- 关于网页中行内元素的基线(baseline)、行高(line-height)、垂直对齐(vertical-align)等
- vertical-align:让表单与文字垂直对齐
- vertical-align:让表单与文字垂直对齐
- 利用vertical-align:middle实现行内元素的水平垂直居中对齐
- box-align,box-pack实现元素垂直底部对齐
- css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
- 关于垂直对齐方式vertical-align
- 垂直对齐:vertical-align属性(转贴)
- CSS 实现文字、图片垂直对齐(vertical-align)
- CSS中,display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨
- 利用vertical-align:middle实现垂直居中对齐