0

我正在尝试使用 jquery 向 DOM 添加一个项目。我希望它覆盖所有其他内容的顶部（z-index）（已经设置了数百个 z-indices）并且它应该始终居中对齐。

在将此 div 添加到 DOM 时，我将其“左”属性设置为 $(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% 和一些以像素为单位的负左边距。如果我设置与“屏幕”相关的“左”属性，那么只有当用户最大化浏览器窗口时它才会居中。

用高 z-index 定位这个绝对定位的 div 以使其始终居中的好方法是什么？

4

2 回答 2

2

首先，margin: 0px auto;足以使 div 水平居中。因此，只需删除该left属性就可以解决问题。

如果不是，由于您使用的是 jQuery，因此您可以控制一个.resize()事件window来再次修复外观。

例如

function resizeMyBox() {
  //code to resize
}       
$(function() {
   resizeMyBox();  // Resize on DOM ready
});
$(window).resize(function() {
   resizeMyBox(); //Resize again on every resize
});
于 2012-04-17T12:02:39.683 回答
0 
#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;
}

我知道你说过你尝试过这个 - 但这在任何以标准兼容模式运行的浏览器中一直对我有用（即使是 ie）它可能会因为不考虑边框或填充而被抛弃。这是一个工作示例：http: //jsfiddle.net/U3RrT/

我刚刚意识到这可能是因为您在其上方设置了一个具有不同position属性的元素；试试position:fixed;。

于 2012-04-17T12:13:07.557 回答