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
投稿猜你喜欢
- 匿名函数匿名函数就是不需要显示式的指定函数名首先看一行代码：def calc(x,y): re
- 设计网站的同志背景主要有两种：学计算机、学艺术。基本上会写代码的不懂设计，会设计的不懂代码，这个格局似乎到今天还没变。某些学计算机的同学，有
关于窗口函数的基础，请看文章SQL窗口函数许多常见的聚合函数也可以作为窗口函数使用，包括AVG()、SUM()、COUNT()、MAX()以- Python下载Python最新源码，二进制文档，新闻资讯等可以在Python的官网查看到：Python官网：http://www.pyth
- view视图import reimport osimport mimetypesfrom wsgiref.util import FileW
- 大数据一般是在“云”上玩的，但“云”都是要钱的，而且数据上上下下的也比较麻烦。所以，在本地电脑上快速处理数据的技能还是要的。pandas在比
- 一、理解tween.js如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了，首
- 0x00 前言大家对HTTP代理应该都非常熟悉，它在很多方面都有着极为广泛的应用。HTTP代理分为正向代理和反向代理两种，后者一般用于将防火
- 本文实例讲述了python版本的读写锁操作方法。分享给大家供大家参考，具体如下：最近要用到读写锁的机制,但是python2.7的自带库里居然
- Django提供了一个新的类来帮助管理分页数据，这个类存放在django/core/paginator.py.它可以接收列表、元组或其它可迭
- 本文实例为大家分享了基于TensorFlow的CNN实现Mnist手写数字识别的具体代码，供大家参考，具体内容如下一、CNN模型结构输入层：
- 前言Python 3.7 将于今年夏天发布，Python 3.7 中将会有许多新东西：各种字符集的改进对注释的推迟评估以及对dataclas
- 本文实例讲述了Mysql存储过程中游标的用法。分享给大家供大家参考。具体如下：1. 批量插入商户路由关联数据：DELIMITER $$USE
- 前言：通过@语句调用一个函数去给另一个函数增加或修改一些功能的语法规则称之为Python装饰器。下面通过一个小案例来简单的理解什么是装饰器。
- 本文实例讲述了python使用xmlrpclib模块实现对百度google的ping功能。分享给大家供大家参考。具体分析如下：最近在做SEO
- Oracle中大文本数据类型Clob 长文本类型 （MySQL中不支持，使用的是text）Blob 二进
- 1 前言正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好
- IIF: 根据布尔表达式计算为 true 还是 false，返回其中一个值。IIF 是一种用于编写 CASE 表达式的快速方法。 它将传递的
- 析构函数当某个对象成为垃圾或者当对象被显式销毁时执行。PHP5中提供的析构函数是__destruct，其与构造方法__construct相对
- 由于一些原因，视频录制要告一段落了。再写一篇关于cntk的文章分享出来吧。我也很想将这个事情进行下去。以后如果条件允许还会接着做。cntk2
