Vertical Align详解
CSS中有一个属性叫做vertical-align。在初次接触到这个属性时可能会觉得有一些难以理解，所以这里我们就对它的用法做个较为详细的介绍。它最基本的用法如下：
1 2 3 | img {
vertical-align: middle;
} |
注意一下上面这个例子，这个属性依附于一个图片元素。图片在自然状态下属于内联元素，会跟随于之前的文本，显示在其右侧(如果宽度足够)。具体怎么个跟随法，就要来看一下这个属性有多少种取值。
在W3C的规范中，vertical-align属性可以取以下几种值：
baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, 或者是百分比的计算结果。
所谓的难以理解，我想，大多是由于开发人员想要将vertical-align作用于块级元素，但是却没有得到理想的结果。如果你有一个较小的div，位于一个较大的外部div中，并想让内部的小div基于外层元素垂直居中，vertical-align并不能帮助你实现这个目标。如果你还不知道应该如何实现，可以看一下这篇文章。
Baseline:
baseline是vertical-align的默认值，文本与紧跟文本的图片会针对某条基线对齐。注意看下图中这条基线的位置，图片并不会与文字的最低端对齐。
Middle:
或许这个属性最常用的取值就是middle了，特别是应用在一些图标大小的图片上。我们来对比一下middle取值在各个浏览器中的实现。
浏览器做到了它所能做到的最好，平衡了文字和图片的高度，并实现了垂直居中。
但是要注意到的是，一旦图片尺寸大于了文字段落指定的font-size和line-height，图片将会对下面的文字段落造成挤压，如下图。
Text-bottom:
不同于baseline，如果vertical-align取值为text-bottom的话，图片将严格参照文字底部进行对齐。
Text-top:
与text-bottom相对的是text-top，它使得图片与文字顶端对齐，但是这取决于文字的font-size属性，所以也许看起来会和严格的顶端对齐有些差距。要注意的是Georgia字体，可能会在高度上造成一些小的差距。
Top & Bottom
top和bottom和text-top、text-bottom有些类似，但是使用这两个值会使得对齐并不限制于文字，例如它可以针对另一张图片。所以如果需要对两张尺寸不同，且都超过文字高度的图片做垂直方向上的对齐，就可以使用top和bottom属性值。
Sub & Super
这两个值会产生类似于文字上标和下标的效果。所以元素的对齐将会是下面这样：
在表格单元格中的垂直对齐
不同于图片，在表格的单元格中，vertical-align默认的值是middle。
如果你想要文字顶端对齐或是底部对齐，可以使用top和bottom属性值。
当你在表格单元格中使用vertical-align时，记住，top,bottom和middle是你的最佳选择。除此之外的其他取值，要不是没有意义不能产生效果，就是有浏览器兼容方面的问题。举个例子，如果你在单元格中使用了vertical-align:text-bottom，那么文字在ie6中是底部对齐的，但是在Safari4中，它会基于顶部对齐；而vertical-align:sub将会导致ie6中居中对齐，Safari4中顶部对齐。
vertical-align和inline-block
图像在标准中是内联元素，但是在行为上，可能更像是inline-block元素。因为不同于其他的内联元素，你可以为他们设定宽度和高度。
inline-block元素实际上就和图像的垂直对齐一样，所以你可以参考以上的解释。但是要注意的是，并不是所有浏览器都对inline-block元素做出一致的解析，所以vertical-align可能也会导致一些兼容性方面的错误，兼容性方面的知识就需要另谈了。
避免使用陈旧的内嵌样式
偶尔你会见到一种叫”valign”的属性出现在table中，来用于垂直对齐。就像：
1 | <td valign=top> |
需要指出的是这个属性已经被废弃而不应该被继续使用，没有什么理由，而你可以使用CSS来继续实现它所能做到的东西。
