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(如果你没有做任何声明的话)。图片会和文字以文字基线为准对其。注意下行字母降到了基线以下。图片不会和下行字母的最下端对齐,那不是基线。

  



  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。



相关阅读:
关于Access数据表中的Size字段Insert的Bug
一个获取FORM表单值正则表达式
关于Zend Optimizer
ADO.Net实现Oracle大批量数据的更新优化
SQL SERVER性能优化综述(很好的总结,不要错过哦)
Linux下玩QQ:OpenQ 编译和安装
Linux系统下管道命令的结合使用技巧
PHP的FTP学习(一)
JavaScript 原型学习总结
在线编辑器的实现原理(兼容IE和FireFox)
ORACLE 10G使用Exp程序导出整个数据库
web前端开发经验浅谈:分享看过的书籍和成长过程
HTML5与数据库API核心规范
div+css与xhtml+css是什么意思?
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 江南的初秋 感恩节手抄报:节日吃什么 生活的感慨 我谈“父母之命”作文400字 20则职场哲理小故事 向上看向下看作文 爱与被爱,爱的人与被爱的人.... 也许这样,你会更轻松作文800字 我读了第一课的感受 朱爷爷的长寿秘诀 书香家庭作文500字 我们的约定唯美温馨爱情句子带图片 我还不懂得感恩 房地产抵押借款合同 傅家村桃园参观记 没有签劳动合同 2015规划局“三严三实”专题教育工作计划 李白《忆东山二首·其一》 打水痘疫苗 全市组工干部培训班学习心得体会二十 同是天涯人,相逢又相识 观《南京大屠杀》有感900字 爱,是永不止息的 暑假《千年一叹》读后感 自力更生,艰苦奋斗作文700字 保安工作管理制度实施细则 水利局副局长在全市中小河流治理规划编制工作会议上的讲话 求职信范文700字 等待梦里花开作文450字 《我最爱的风景》讲义 朋友(二)作文300字 梦醒心碎作文450字 我最喜欢的一种食物 2015会计专业实习总结 2012大学军训广播稿 是谁温暖了春天 几重暗香落雨中 昨日的英雄 张小菊传 高中高三作文1200字:三秋夜泪 小学六年级作文700字:我的母亲 2015年中考英语写作素材:名言类 酒店前台接待年终工作总结 《窗外,有一片海》 烦人的心 化暖 公司江西萍乡市场总结 中专生职业生涯规划范本 吃苦耐劳的手 2015护士试用期工作总结

Copyright © 2016 phpStudy |