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

如下图所示：

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

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

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

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

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

body{font-size:12px;}

测试文字

代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下：

顶部对齐css表单,vertical-align 表单元素垂直对齐的解决方法相关推荐

Oracle 表空间不足导致的系统无法登陆问题及解决方法
Oracle 表空间不足导致的系统无法登陆问题及解决方法某医院的 HIS 系统突然无法登陆,并且出现以下提示信息: 初步判断是表空间不足导致的问题,登录服务器查看表空间信息如下: 一.查看表空间信息 ...
【HTML+CSS】元素垂直对齐-vertical-algin
参会人:@提及会议时间:2022-01-20 会议地点:3 号会议室文本对齐vertical-algin vertical-algin: 元素垂直对齐的方式 top顶部对齐 bottom底部对齐 ...
周末杂谈：在MYSQL中，添加数据行后，使用右外连接查询所有课程的选修情况，要求列出课程编号、课程名称、选修人数，表中没有的课程列值为空的解决方法
周末杂谈:在MYSQL中,添加数据行后,使用右外连接查询所有课程的选修情况,要求列出课程编号.课程名称.选修人数,表中没有的课程列值为空的解决方法实验前期准备 course表(课程表) 在其中: c ...
IE浏览器“SEC7113: CSS 因 Mime 类型不匹配而被忽略”问题的解决方法
IE浏览器"SEC7113: CSS 因 Mime 类型不匹配而被忽略"问题的解决方法参考文章: (1)IE浏览器"SEC7113: CSS 因 Mime 类型不匹配而 ...
css文本框圆角不兼容,CSS教程之重置默认样式与IE兼容圆角的解决方法
CSS教程之重置默认样式与IE兼容圆角的解决方法 IE兼容css教程3圆角的htc解决方法现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的 ...
CSS float浮动规则以及父元素高度塌陷的解决方法
本文不讲float的所有内容,只浅谈float对不同高度块之间浮动结果的规则以及父元素高度塌陷的解决方法. 首先看一个小问题,就是float会导致父容器的高度塌陷,如下代码: <head> ...
深入剖析 CSS：字体度量、行高和垂直对齐
Line-height 并且是简单的 CSS 属性.如此简单,以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们.但事实并非如此.它们真的很复杂,也许是最难的,因为它们在创建CSS鲜为人 ...
oracle如何给表上锁,【ORACLE】Oracle中发生表加锁、死锁的原因，查看，与解决方法...
一.表加锁.死锁出现的现象 1.对数据库操作update,insert,delete时候,数据库无法更新,操作等待时长,操作结果不发生改变 2.在程序中,底层(数据访问层)操作时候,不成功,数据库连接 ...
win10 无法删除注册表蓝牙_Win10蓝牙无法删除设备蓝牙鼠标无法连接解决方法...
导读:(Win10蓝牙无法删除设备蓝牙鼠标无法连接怎么办?)相关电脑教程分享. 在Win10系统蓝牙设备中我们可以对连接的蓝牙进行管理,删除等操作,但是有时会遇到一些问题,如用户反馈Win10蓝牙里设 ...
mysql表中的中文是乱码_mysql插入表中的中文显示为乱码或问号的解决方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 今天在做ssh的博客项目时发现mysql数据库中的中文显示为问号,网上查阅了很多资料,都不是很全,所以我总结一下,供大家参考和自己复习. 1.我的 ...

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

顶部对齐css表单,vertical-align 表单元素垂直对齐的解决方法相关推荐

最新文章

热门文章