表单元素与提示文字无法对齐的问题
我要评论事实证明，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下… 无语了。
相关文章
- 为了使表单元素和文字都垂直居中对齐，当文本框和下拉框都没问题，但是单选框和复选框就了，经过反复测试终于完整搞定与大家分享，感兴趣的各位可不要错过了哈2013-03-21
- checkbox与文字不对齐会影响美观本文将将介绍解决方法：需要checkbox居中对其 然后文字也要居中对齐，checkbox在FF和IE下表现不一样;不管你怎么设置默认的margin和padding2013-01-21
- 修改图片大小对齐间隔边框属性,这些操作在开发过程中很常见，也很实用，本文对此进行详细介绍下，感兴趣的朋友可以了解下啊2013-01-20
css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
这两天写个页面css的时候用到了vertical-align属性，使用过程中踩到了坑,因此整理了一些，以备不时之需，感兴趣的朋友可以了解下哦2013-01-09- div中加入span右对齐后，出现了换行问题，一般思路的话一定是认为通过
分开两列，一个align=left,另一个align=right；很是疑惑，于是利用闲暇时间，搜索整理下，晒出来 2012-12-19 css span右对齐 css li标签中span日期靠右布局实现代码
在网页布局中经常会碰到新闻标题靠左日期靠右，想要实现这种布局效果，需要在代码上下点功夫，本人比较上心，也遇到此问题，于是搜集整理一下，需要的朋友可以参考下2012-12-18一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐,这一直是大家所头疼的问题，于是搜集整理一2012-12-11表单元素radio select对齐与IE6下双边距问题解决方案
之前一直困扰自己的一个问题就是表单内radio、select等的对齐问题，搞得自己相当恼.今天终于花了些时间找到了好的解决方法.也希望能够帮到跟我同样闻form色变的人2012-12-07网页中form表单的元素会出现一些问题：比如文本域和按钮对齐问题,这个问题会影响到界面的美观度，本文将介绍如何解决此类问题，需要了解的朋友可以参考下2012-11-30表单元素input、文字完美垂直居中对齐方法.2012-07-11
最新评论