CSS属性Vertical Align使用方法讲解

CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑，因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样：

img{
vertical-align: middle;
}

注意在这个应用案例中，它被应用到了img元素上。图片通常是行内元素，意味着它通常是和文字在一起的。但是到底”在一起”确切的是什么意思？这就是Vertical-align所要解决的。

有效值为：baseline,sub,super,top,text-top,middle,bottom,text-bottom,length或者百分比值。

我认为最让人使人困惑的是，当大家尝试着给块级元素使用vertical-align时，却得不到任何结果。如果你有一个大一些div，其中包含一个小的div，你希望小的能够在大的之内垂直居中对其，vertical-align没法帮到你。Douglas Heriot有好方法来实现这种效果。

Baseline

vertical-align默认的值就是baseline（如果你没有做任何声明的话）。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐，那不是基线。

当给表格应用vertical-align时，是靠顶部、底部还是居中对齐要看运气。没有一个值是能够解释的通的，不同的浏览器有不可预料的结果。比如，在表格中给文字应用text-bottom对齐方式时，IE6中是在底部，Safari4中是在顶部。设置为sub，IE6中是在中间，Safari4中是在顶部。

Vertical Align和Inline-Block

图片，从理论上来说是行内元素，表现上却像是行内块级元素。你可以给它设置高度和宽度，它会遵守，不像其它行内元素。

给行内块级元素应用vertical-align，表现就像如上图片那样，这是vertical-align是最少让你担心的。但是那是另外一个故事了……

不要使用缩写

通常你会在表格中看到”valign”来实现垂直对齐。比如，<td valign=top>。需要说明的是这种缩写是不应该使用的。真的没有任何理由这样使用CSS。