vertical-align 表单元素垂直对齐的解决方法

建站知识 2021-07-03 08:42www.168986.cn长沙网站建设
如下图所示

于是上网查看了一些网站,发现这个问题是普遍存在的,如下图(FF3.5)

在很多网站涉及到表单的页面中,都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。,搜索到了wheatlee前辈的文章《》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点

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

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

按照这个思路,对照我遇到的问题,想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染(是不是把复选框当成一个正方形图片来对待)。于是写出狼蚁网站SEO优化的代码

<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下显示如下


1

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by