绝对中心格没有负边界

我已经尝试了大约6种不同的方法，并没有能够得到这个工作。绝对中心格没有负边界

我试图居中“div.content”水平在页面上同时使用position:absolute;

此方法适用于所有的浏览器，但如果你缩小页面大小，滚动条出现在底部：

HTML：

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="footer"></div> 
    <div class="content"> 
     <div class="content2">CENTER THIS DIV</div> 
    </div> 
</div>

CSS：

div.header { 
    background:url('http://i.istockimg.com/file_thumbview_approve/11670843/2/stock-illustration-11670843-seamless-wallpaper-background-tile.jpg') top center repeat-x; 
    height:150px;   
} 

div.footer { 
    background:url('http://www.featurepics.com/FI/Thumb300/20081029/Blue-Tile-Background-947601.jpg') top left repeat-x; 
    height:150px;   
} 

div.content { 
    position:absolute; 
    top:20px; 
    left:50%; 
    height:250px; 
    width:300px;   
} 

div.content2 { 
    position:relative; 
    left:-50%; 
    background:white; 
    height:250px; 
}

来源

2012-07-19 supercoolville

你为什么反对使用负边距？您正在使用的技术会导致水平滚动条出现，负边距会解决此问题。 – joshnh 2012-07-19 06:23:47

我的意思是：'left：-50％'。那是什么导致滚动条。如果你能解决这个负利润率，给我看代码！ – supercoolville 2012-07-19 06:25:43

我会建议使用负保证金是这样的：http://jsfiddle.net/joshnh/HFwMT/

这里是调整后的代码：

HTML：

CSS：

.header { 
    background: url('http://i.istockimg.com/file_thumbview_approve/11670843/2/stock-illustration-11670843-seamless-wallpaper-background-tile.jpg') top center repeat-x; 
    height: 150px;   
} 
.footer { 
    background: url('http://www.featurepics.com/FI/Thumb300/20081029/Blue-Tile-Background-947601.jpg') top left repeat-x; 
    height: 150px;   
} 
.content2 { 
    background: #fff; 
    height: 250px; 
    left: 50%; 
    margin-left: -150px; /* Half of the width */ 
    margin-top: -130px; 
    position: absolute; 
    width: 300px; 
}

来源

2012-07-19 06:33:33 joshnh

很棒!!!!!!!!!!!!!!!谢谢！！！！！！！！！ – supercoolville 2012-07-19 06:36:10

-4

我不很清楚这意味着什么：我试图使用绝对中心一个div。但我发现标签很棒。

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="footer"></div> 
    <div class="content"> 
     <center><div class="content2">HERE</div></center> 
    </div> 
</div>

CSS被诅咒。除此之外，你将需要一把魔杖（就我而言）。

来源

2012-07-19 06:25:50 Dale

在回答之前，请尝试学习CSS基础知识。 – Prashobh 2012-07-19 06:37:24

你可以试试这个..我还没有测试过..

div.content { 
     position: fixed; 
     top: 0%; 
     left: 0%; 
     width: 100%; 
     height: 100%;  
    } 

    div.content2 { 
     position: fixed; 
     top: 50%; 
     left: 50%; 
     border: 0px;  
     overflow: none; 
    }

来源

2012-07-19 06:39:09

绝对中心格没有负边界

回答

相关问题