[CSS] vertical-align
原文地址：
http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
1. 首先关于数值，见下面的示例：
.test{vertical-align:-2px;}
我的理解为，元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题。这个没有什么好说的。
2. 再者关于百分数值，百分值与数值，以我的眼光看去，代表了不同的思想，以及心态。前者代表着灵活，自由与开放，后者有严谨，精确，安稳之意。CSS中支持百分值的属性还不少，例如width/height,line-height,font-size,这里的vertical-align属性也是其一。提到百分值，必然牵扯到相对于那个属性（或值），例如宽度百分比都是相对于父块状元素的宽度值的，font-size的百分值是相对于向外的第一含有font-size属性的层的font-size大小而言的，而这里的vertical-align，有些不拘一格，是相对于此标签继承的line-height值决定的。例如，如下示例代码：
.test{vertical-align:-10%;}
假设这里的.test的标签继承的行高是20px，则这里的vertical-align:-10%所代表的实际值是：-10% * 20 = 2(像素)。不过事情没有这么简单，CSS中的line-height是个非常精深的属性，建议您看看我之前写的这篇文章：css行高line-height的一些深入理解及应用，所以遇到像IE6/IE7这样吃三鹿奶粉长大的浏览器肯定会出点篓子的。什么篓子呢，就是“IE6/IE7浏览器下的vertical-align的百分比值不支持小数line-height。”您可以看看我处理的以小数值line-height继承的vertical-align百分比显示对比图[参展对象：IE6(观众扔鸡蛋)和Firefox3.6(美女送鲜花)]：
如果您现在使用的就是IE6或是IE7或是IE6/7内核的浏览器，同时相对这个bug有所见识，您可以狠狠地点击这里：IE6/7 vertical-align百分值与line-height小数值bug
要是您不想见到让您生气的IE下的糟糕表现，您可以狠狠地点击这里：非小数line-height修复demo。
3. 最后关于其他属性，像是bottom，middle等，我是懒得说什么了，为何？可以看看下面这张兼容性表：
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Buggy | Full | Full | Full | Buggy |
这是老外前辈整出的vertical-align兼容性表，虽然我不清楚Opera浏览器一栏的full是个什么意思，但是”buggy”知道，就是臭虫成群，bug成堆的意思，我想，做过简单研究的都会注意到不同浏览器下的差异确实明显。
三、为什么我的vertical-align属性不起作用？
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：
span{vertical-align:middle;}div{vertical-align:middle;}
虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。
具体请看：http://www.zhangxinxu.com/study/201005/verticle-align-test-demo.html
四、text-top
<div style="line-height:200px; border:1px solid #34538b;">
<span style="font-size:60px; border:1px solid #a0b3d6; vertical-align:text-top;">大大的文字</span>后面是静止的文字。
</div>
text-top
aligns the top of the box with the top of the parent element’s font
翻译过来就是：让当前box的顶部与父元素的文字的顶部对齐
所以我们只要恰准了box的顶部以及父元素文字的顶部，就可以知道这类表现是怎么回事，哪种表现更加符合其本身的定义。
1、现代浏览器表现
当前box的顶部：黄色box顶部
父元素的文字的顶部 ： 灰色文字的顶部，因为父元素的line-height:200px;所以文字撑开的高度是200px;
2、ie家族表现
当前box的顶部：当前元素文字的顶部即大文字的顶部。
父元素的文字的顶部 ： 灰色文字的顶部，
ie下：忽略vertical-align的定义，vertical-align:text-top就是两段文字之间的对齐，span文字的顶部与后面裸文字的顶部对齐
IE8下高度为227像素，这多出来的27像素是60像素的文字下移与后面文字顶部对齐的距离，这与现代浏览器下的父标签撑开表现是有些类似的，IE8浏览器可以说是有改进的，但是在理解父元素的顶部上似乎与现代浏览器有偏差，不知在IE9浏览器下会是怎样的一个表现。一起拭目以待。
