关于网页设计中的绝对定位和居中
发布时间：2018-09-06 17:50:59 所属栏目：产品 来源：站长网
导读：绝对定位和居中应该没有关系吧，关系不大，但有两种特殊情况可能遇见这样的问题。 body div id=warpper div id=header/div div id=sidebar/div div id=content/div? /div extraDivspan/span/extraDiv body 1 如果div#header,div#header,#header都是用绝对定
|
绝对定位和居中应该没有关系吧，关系不大，但有两种特殊情况可能遇见这样的问题。 <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，确实是本好书。 （编辑：云计算网_宿迁站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐