软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > 工具与技巧 > 关于网页设计中的绝对定位和居中

关于网页设计中的绝对定位和居中

绝对定位和居中应该没有关系吧,关系不大,但有两种特殊情况可能遇见这样的问题。

<body>
<div id="warpper">
<div id="header"></div>
<div id="sidebar">/div>
<div id="content"></div?
</div>
<extraDiv><span></span></extraDiv>
<body>
1 如果div#header,div#header,#header都是用绝对定位,如何让他们居中呢?

#header, #sidebar, #content {
position: absolute;
}
可以这样做:

#warpper {
position: relative;
width: 800px;
margin: 0 auto;
}

2 如何对div#extraDiv进行居中?
注意,这个div在div#warpper的外面,我在csszengarden中了解了这么一个方法:首先将父元素绝对定位于页
面的最左边,并将其宽度指定为100%,在水平方向铺满整个浏览器,然后将其子元素设置为居中。


#extraDiv {
position: absolute;
width: 100%;
}
#extraDiv span {
width: 800px;
margin: 0 auto;
}
如果css有点基础了,推荐大家去看一下csszengarden,确实是本好书。
    相关阅读
    网友评论
    栏目导航
    推荐软件