vertical-align表单元素垂直对齐
作者:xidea 来源:蓝色理想 发布时间:2009-07-27 13:02:00
标签:vertical-align,表单,垂直对齐
最近的项目涉及到很多表单的制作,特别是复选框(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下显示如下:
0
投稿
猜你喜欢
- 从毕业实习算起,从事可用性方面的工作到现在已经5年了。在此记录笔者的一些所见所想,和大家讨论分享一下。用户研究在“以用户为中心”的界面设计方
- 一、前言:在经过一段时间的存储过程开发之后,写下了一些开发时候的小结和经验与大家共享,希望对大家有益,主要是针对Sybase和SQL Ser
- 用window.open打开的窗口中,有时候session变量会丢掉,给asp编程带来的一定的麻烦。用参数传递解决它:<DIV&nbs
- 很多人喜欢把一个网站中相同的部分象是统一的页面logo,版权声明等做成一个过程,然后放到一个include文件中,这样所有的页面就都可以使用
- HTTP_X_FORWARDED_FOR与REMOTE_ADDR的区别.在Request.ServerVariables中并没有HTTP_X
- 数据库的选择原则是什么?我只知道小网站用Access,大网站用SQL,请问它的具体选择原则是什么?在实际应用中,数据库的选择原则一般是:如果
- 今天在这里,不以设计师的身份,而从一个普通用户的角度和各位聊聊设计中蕴含的那份情感,关于情感再产品设计中的意义,聊聊设计中的那份源于“心”的
- ASPError Object 这个新增的,内置与ASP 3.0中的对象提供了一个以往版本中没有的专门用来处理错误的对象,这样,我们来操纵错
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 9 - Input Filterin
- 代码如下:use tempdb if object_id('tempdb..#table') is not null dro
- 以前写JS程序的时候,经常碰到了定位的问题。但每次都看到一半,找到需要的属性就了事了。今天下了狠心,要花点时间,彻底地弄明白他。以下内容看着
- access中可以将文本中的数据轻松导入表中,mysql中用起来没那么方便,其实起来也很简单。首先将数据记录按行处理好用特定的字符分开如:“
- 当然,这些并非真正的定律,而只是一些有益的忠告,使你免陷于使用层时可能的困顿中。原来有九条定律的,我们精简掉一条,还有下面的八条:1. 如果
- 以下的实例为去除指定表中数据类型是VARCHAR,CHAR,NVARCHAR的字段值中的不可见字符。 注释:此处只去掉前后的不可见字符,不包
- 如果独自放着jQuery做事,它绝对做得很好,但jQuery充许与其他库共存在,有些事就防不胜防了。看下面代码data :func
- 昨天在得写“RSS收藏”栏目展现的时候我让RSS的列表用弹出的形式展现了,开始是直接的控制 style.display 来做的,但是感觉有点
- 今天有个学生问我:页面中使用GIF格式,失真太大,怎么办呢?这个问题比较简单啊,只要用JPG就可以了。我们常用的页面的图片格式有三种,GIF
- 实现原理:将用户信息保存在数据库中,若能在数据库中检索到用户输入的姓名和口令,就允许访问该一页面。代码如下:protect.asp<h
- PJBLOG3的相关日志,现在网上好像还没有谁有相关的修改说明吧,反正升级之后,正好有必要,也就写了个,在这里也给大家共享共享。当前相关日志
- SQL Server 2000中存在的许多的备份和恢复特性都同样保留在了SQL Server 2005中,但是有一些新的提高同样值得我们关注