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（假设你没有做任何声明的话）。图片会和文字以文字基线为准对其。留意下行字母降到了基线以下。图片不会和下行字母的最下端对齐，那不是基线。

　　

　　Middle

　　也许vertical-align的最常用的用法是给图标大小的图片配置为”middle”。结果有着跨浏览器的一致性。

　　

　　浏览器可以让文字和图片精确的对齐：

　　

　　要留意假设图片比现在文字和行高要大的话，在须要的时分它会将下面的线条向下推：

　　

　　Text-bottom

　　和基线不一样，它是文字的底端，是下行文字接近的方向。图片也可以够很好的和它对齐。

　　

　　Text-top

　　和text-bottom相反的就是text-top，现在文字的最高点。你也可以够顺次对齐。留意下面的文字，Georgia字体，最上端要比图片高出一点。

　　

　　Top和Bottom

　　Top和Bottom类似于text-top和text-bottom，但是他们不受文字的限定，依托于所在行的一切东西（比如另外一张图片）。因而假设一行有两张图片，不一样的高度，并且都要比所在行的文字大，它们的顶端（或许底端）就会对齐，而不理会文字的大小。

　　Sub和Super

　　这两个值的意思是上标和下标，因而元素依照这个方式对齐自身如下：

　　

　　在表格中垂直对齐

　　不像图片，表格默许为居中垂直对齐：

　　

　　假设你期盼文字与表格的顶部或许底部对齐，使用top或许bottom对齐。

　　

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

　　Vertical Align和Inline-Block

　　图片，从实际上去说是行内元素，表现上却像是行内块级元素。你可以给它配置高度和宽度，它会恪守，不像其它行内元素。

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

　　不要运用缩写

　　通常你会在表格中看到”valign”来完成垂直对齐。比如，《td valign=top》。须要标明的是这种缩写是不应该运用的。真的没有任何理由这样运用CSS。

读库教程网文章由网络收集后整理发布,文章发布人拥有该内容的所有权力及责任!

如果你喜欢这页，可以按Ctrl+D收藏起来。