Question

我正试图将我的网页放在中心位置。还有一个最小1000px，它可以扩展。目前我的页面在缩放时偏离中心30％-center-70％。我很困惑为什么会这样。如果有人能解释为什么会发生这种情况会很棒。

enter image description here

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">


#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

</style>
</head>
<body>
<div id="page">
    <img id="pageImg" src="../Navigation/backgroundImg.png" />
    <div id="navBar">
        <img id="navBarImg" src="../Navigation/navBarBGImg.png" />
    </div>
</div>
</body>
</html>

Answer 1

也许在你的页面宽度上尝试50％......我认为你的结果来自75％的75％......

示例 - http://jsfiddle.net/rob_towner/q8vKK/

#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}

Answer 2

还有其他代码要考虑您还没有发布。这可以推断，因为您发布的代码按照您的意图工作。 A working example（1000px宽度不适合渲染窗口的默认窗口大小，使用滑块展开它并查看代码是否正常工作）。

我使用的CSS：

#page {
    position:relative;
    display:block;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:0;
}
#pageImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:1;
}
#navBarImg {
    position:absolute;
    width:75%;
    margin:auto;
    min-width:1000px;
    z-index:2;
}

居中网页

2 个答案: