中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
招聘求职
中国互联
艺魂宝库网
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> div设计中的文字垂直居中的方法

div设计中的文字垂直居中的方法 (1)

来源:中国设计秀    作者:sharon    点击:1172     加入收藏

       CSS中怎样设置才能使对象中的文字垂直居中于对象,这个问题也是捆扰很多朋友的难题。现在网上的很多代码都做不到浏览器兼容。我把网上有关的方法整理了一下,做了些改动,完全可以兼容各主流浏览器。

下面具体说一下在不同情况下垂直居中的方法。

一、一行文字垂直居中

看一下下面的代码:


        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

       方法:line-height:20px。设置相同的行高和对象高度。

       说明:这种设置简单又兼容各种浏览器,支持内联对象。但如果是固定高度的对象,只能显示一行。当有两行文字时,如果不设置“overflow:hidden”会把对象撑开。

二、多行文字,且高度自适应

请看下面的代码:


        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

       方法:padding-top:10px; padding-bottom:10px。设置相同的上下内边距。

       说明:兼容各种浏览器,支持内联对象,同时又支持非文本对象,如img。但有一个缺点就是对象的高度不能固定。

三、固定高度的多行文字垂直居中

       这种方法比较复杂,我也会详细说明的。下面还是先看代码:


        
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

0
顶一下
[1] [2]
2008-05-20 00:28:00    出处:w3cui.org
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口