即使瀏覽器調整大小後如何水平居中模態div？

我嘗試使用jquery將項目添加到DOM。我希望它覆蓋所有其他內容的頂層（z-index）（已經有數百個z-索引），並且它應始終保持中心對齊。即使瀏覽器調整大小後如何水平居中模態div？

在將此div添加到DOM時，我將其'left'屬性設置爲$（window）.width（）/ 2 - 971/2。 971是我嘗試添加的div的寬度。這是它的CSS

width: 971px; 
height: 669px; 
background-image: url(/path/to/image/); 
position: absolute; 
margin: 0px auto; 
z-index: 2500;

問題是，在瀏覽器調整大小後div不保持居中。我甚至嘗試過使用left：50％和一些負的左邊界像素。如果我將「左」屬性設置爲與「屏幕」相關，那麼只有當瀏覽器窗口被用戶最大化時，它才居中。

什麼是一個好方法來定位這個絕對定位的div與高z指數，使其始終居中？

來源

2012-04-17 walmik

爲什麼你甚至爲它指定一個左值？通過使用'margin：auto'，它應該自動居中。 – Viruzzo 2012-04-17 12:02:04

張貼您的html ... – AlphaMale 2012-04-17 12:04:23

#someId{ 
    width: 971px; 
    height: 669px; 
    padding: 0; 
    border: 0; 

    margin-left:-486px; /* 971/2 */ 
    margin-top:-335px; /* 669/2 */ 

    position: fixed; 
    left: 50%; 
    top: 50%; 

    background-image: url(/path/to/image/); 
    z-index: 2500; 
}

我知道你說你嘗試過這一點 - 但一直在運行標準兼容模式（即連）任何瀏覽器工作對我來說它可能已被拋考慮不考慮邊界或填充。這裏有一個工作示例：http://jsfiddle.net/U3RrT/

我剛剛意識到，它可能是因爲你已經在其上面設置了一個不同的position屬性;嘗試position:fixed;。

來源

2012-04-17 12:13:07 Mikey

我已經將位置設置爲固定，但隨後當您調整瀏覽器的大小時會出現問題 – walmik 2012-04-17 12:37:35

這應該會在所有瀏覽器中自動更新 - jsfiddle示例在調整大小時是否適用於您？ – Mikey 2012-04-17 13:49:50

非常感謝您，這樣做訣竅:) – walmik 2012-04-17 15:18:58

首先，margin: 0px auto;足以水平居中div。所以，只需刪除left屬性就可以解決問題。

如果沒有，因爲你正在使用jQuery，有一個window，你可以控制重新修復的外觀.resize()事件。

例如

function resizeMyBox() { 
    //code to resize 
}  
$(function() { 
    resizeMyBox(); // Resize on DOM ready 
}); 
$(window).resize(function() { 
    resizeMyBox(); //Resize again on every resize 
});

來源

2012-04-17 12:02:39 Starx

該位置設置爲絕對，因此我必須指定'左'屬性。我希望我可以做到這一點，而不必爲此添加事件監聽器:( – walmik 2012-04-17 12:09:22

@saganbyte，您已經在您的代碼中包含了jquery，所以使用它沒有任何傷害。 – Starx 2012-04-17 12:11:43

即使瀏覽器調整大小後如何水平居中模態div？

回答

相關問題