絕對定位+與窗口扭曲切緣陰性調整

我有一個包裝div，我在窗口通緝的中心。我用下面的CSS來實現這一目標：絕對定位+與窗口扭曲切緣陰性調整

#wrapper { 
    width: 960px; 
    margin-left: -480px; 
    position: absolute; 
    left: 50%; 
}

唯一的問題是，當我改變瀏覽窗口的大小，我看不到任何東西離開了窗口的中間點。我知道這是因爲負邊界，但有什麼辦法可以糾正這個問題嗎？

我想把它漂浮在其他一些div s因此，汽車保證金竅門將無法正常工作。

這裏是我有的鏈接：dev.connectionsquad.com。

來源

2012-07-22 Tom Nolan

試過'margin：0 auto;'？ – cyborg86pl 2012-07-22 22:22:58

我知道，那個中心在一個窗口一個div，但我需要包裝上，以「漂浮」在一些其他的div並保持居中。的鏈接，我試圖爲dev.connectionsquad.com – 2012-07-22 22:23:48

所以怎麼樣2周的div一個在另一個 - 第一爲窗口的寬度爲100％和裏面，你的div被自動頁邊距和地方爲中心？ – cyborg86pl 2012-07-22 22:25:52

我建議以下任何在頁面中心的div。 body { text-align: center; } #wrapper { width: 1080px; margin: 0px auto; text-align: left; }

對於某些瀏覽器，您必須在body標籤上使用text-align：center來使div中心位於頁面中。

來源

2012-07-23 00:53:05

我建議重寫你的代碼，使符合標準的，就像這樣：

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8" /> 
    <title></title> 
    <style type="text/css"> 
html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    min-height: 600px; 
} 
body { 
    background: #222; 
    text-align: center 
} 
#content { 
    text-align: left; 
    display: inline-block; 
    position: absolute; 
    width: 40%; 
    min-width: 300px; 
    height: 50%; 
    min-height: 400px; 
    top: 10%; 
    margin-left: -20%; 
    padding: 25px; 
    background-color: #ccc; 
    background-image: url('/img/noise.png'); 
    border: 5px solid #000 
} 
#background { 
    position: absolute; 
    width: 100%; 
    height: 250px; 
    top: 50%; 
    margin-top: -125px; 
    z-index: -1; 
    background-color: #666; 
    background-image: url('/img/placeholder.png'); 
    border-top: 5px solid #eee; 
    border-bottom: 5px solid #eee; 
} 
a:active, a:visited { 
    color: #075f76 
} 
    </style> 
</head> 
<body> 
    <div id="content"> 
     <h1>Test</h1> 
    </div> 
    <div id="background"></div> 
</body> 
</html>

見HTML5 - MDN。

來源

2012-07-23 02:44:16

絕對定位+與窗口扭曲切緣陰性調整

回答

相關問題