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

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

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

方法:

       (1)vertical-align:middle; display:table-cell。这种方法的意思是:将对象强制转换为Table,vertical-align:middle的作用和表格中的valign="center"相同。

       本来是很方便的一个属性,但IE不支持这个属性。为了使各浏览器兼容,我们不得不想其他的方法。

       (2)在对象内建立一个子对象,并在子对象内再建立一个子对象或段落。网页中:

<div id="a"><div><p>这里具有多行文字,高度是50px这里具有多行文字,高度是50px</p></div></div>

CSS中:

p {margin:0;}:因为在FireFox中默认P是有间距的

#a {height:50px;position:relative;}:设置高度50,如果要是子对象相对它定位,则要设置position:relative

#a div {*position:absolute;*top:50%;}:前面加星号“*”只有IE支持,其他浏览器会忽略此设置。position:absolute设置了此子对象的定位为绝对定位,top:50%设置了显示在距顶端50%的位置,即25px(因为上面设置了父对象的高度为50px)。

#a div p {*position:relative;*top:-50%;}:这段代码只能先理解为向上移动剩下高度的50%。因为top设置了负值,相当于向相反的方向移动。

说明:支持主流浏览器(在IE6,FireFox2下测试)。

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