CSS属性Vertical Align基本使用方法
|
CSS有一个属性叫Vertical Align。当你第一次学习它的时候会有些困惑，因此我觉得我们可以通过它的用法来了解它。最基本的用法像这样： img{ 注意在这个应用案例中，它被应用到了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 图片， |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
