1

我正在尝试将我的网页居中。还有一个最小的 1000 像素，它可以按比例放大。目前我的页面在缩放时偏离中心 30%-center-70%。我很困惑为什么会这样。如果有人能解释为什么会发生这种情况，那就太好了。

在此处输入图像描述

<!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>
4

2 回答 2

0

还有其他代码需要考虑您尚未发布。这是可以推断的，因为您发布的代码按您的预期工作。一个工作示例（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;
}
于 2013-07-18T12:56:17.557 回答
0

也许在你的页面宽度上尝试 50% ......我认为你的结果是从 75% 的 75% 得到的......

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

#page {
position:relative;
display:block;
width:50%;
margin:auto;
min-width:1000px;
z-index:0;
}
于 2013-07-18T01:18:41.947 回答