logo 广告
Loading...
 导航 所在位置:论坛首页 -> ┈┋电脑网络┋┈ -> 网页制作技术 -> CSS教程 不定高度DIV绝对居中
回复
标题:CSS教程 不定高度DIV绝对居中收藏 编辑 删除 楼主 | 上一篇 下一篇
鞋的恋爱
头像
等级:大侠
权限:普通用户
积分:143
金钱:4726
声望:267
经验:241
发帖数:1487
注册:2006年8月22日
资料 短消息2008-7-6 21:17:26

一般来说,指定高度的DIV垂直和水平居中比较方便,而不定高度的话就稍微麻烦了点,我尝试了一下,通过2个辅助的DIV实现了绝对居中,兼容IE和FF等标准浏览器。RF3中国教程在线

CSS代码: RF3中国教程在线

#wrapper[id]{display:table;} RF3中国教程在线
#mid{position: absolute;top:50%;left:50%} RF3中国教程在线
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static} RF3中国教程在线
#box{position:relative;top:-50%;left:-50%;z-index:9999;width:300px} RF3中国教程在线
#box[id]{left:0;margin:0 auto;} RF3中国教程在线
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;} RF3中国教程在线

XHTML代码:RF3中国教程在线

' RF3中国教程在线
<div id="mid"> RF3中国教程在线
<div id="box" RF3中国教程在线
<p>http://bolm.cn</p> RF3中国教程在线
<p>DIV绝对居中示例</p> RF3中国教程在线
</div> RF3中国教程在线
</div> RF3中国教程在线
</div> RF3中国教程在线

RF3中国教程在线
     简单解释下,wrapper为外层,mid为中间层,box即为绝对居中的那层。RF3中国教程在线

     在FF等标准浏览器中可以通过将wrapper层的演示方式为table,mid层设置为table-cell的显示方式,这样就可以使用 vertical-align:middle实现中间层的绝对垂直居中,而IE中则使用了top:50%的方式,以及后面box设置的相对定位-50%来 达到垂直居中。水平居中的方式也不同,FF可以很简单的设置margin实现,而IE则同样设置了left互相抵消的方式实现。RF3中国教程在线

     另外类似#box[id]这样的表达方式只有FF等标准浏览器认识,所以可以在这里设置属于FF等浏览器的样式。RF3中国教程在线

     由于未设置box的高度,默认就为auto不定高了,不定宽也同理。

签名

2008-7-6 21:17:26 顶部
第1页 共页 共0个回复     <<    >>    
 快速回复
  • 支持UBB,HTML标签

  • 高级回复

  • 操作选项:评分 加精 解精 奖惩 设专题 设公告 解公告 固顶 总固顶 解固顶 结帖 解结帖 锁帖 解锁 移帖 删帖
      首页 | 购买指南 | 虚拟主机 | 特色介绍 | 下载中心 | 支付方式
    Copyright 2004-2008 BBSGood.com Powered By: BBSGood.Speed Version 5.0
      咨询电话:0575-85513832、0575-85513825(传真)、7*24小时咨询服务:13606552007 不良信息举报中心 浙ICP备05029817号
      业务QQ:38958768、客服QQ1:415896239、客服QQ2:343896043、MSN:jccsxx@hotmail.com