本文主要包含vertical-align,垂直对齐等相关知识,佚名 希望在学习及工作中可以帮助到您
如下图所示：
于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（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下显示如下：
您可能想查找下面的文章:
- 深入理解css中vertical-align属性
- 浅谈css中vertical-align和line-height的用法
- CSS属性探秘系列(四)：vertical-align
- 利用vertical-align:middle实现行内元素的水平垂直居中对齐
- 本文的主角 vertical-align使用介绍
- css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明
- css vertical-align属性的一些理解与认识(二) text-top篇
- css vertical-align属性的一些理解与认识(一)
- line-height 和 vertical-align 行高与行对齐精解 （图文）
- div vertical-align不起作用解决办法