絕對中心格沒有負邊界

我已經嘗試了大約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

絕對中心格沒有負邊界

回答

相關問題