居中固定宽度的页面内容

Question

我什至不知道从哪里开始，所以我会尝试解释一下。我正在为我在 Aptana Studio 中的学期项目创建一个硬件商店，并且是运行 Google Chrome 中的站点。显然，运行 Google Chrome 中的一个站点使其自动响应？如您在以下屏幕截图中所见，该站点在左侧固定，在右侧响应：

（调整大小 1）

（调整大小 2）

（调整大小 3）

（调整大小 4）

当然，黑白照片不会调整大小，但我其实不想这样。我只希望页眉中的内容（徽标和照片）保持相同大小 - 固定在页面上。以Ace Harware的网站为例：http://www.acehardware.com/home/index.jsp

站点中的所有内容都被限制在一定的范围内。当页面完全打开时，内容居中，两边留有白色 space 的边距。当页面调整大小（变小）时，边距开始消失，直到最后出现一个分界点 - 并且内容不再改变位置。

（整页）

（第一次调整大小）

（第二次调整大小——虽然页面变小了，但内容是固定的）

这正是我要对我的硬件商店网站所做的。我如何实现这种效果？我听说过 bootstrap 但我真的不太了解它或我会使用哪个模板。感谢任何 help/adivce。如果在这里解释起来太复杂，请给我发一份你可能知道的好的教程。

Answer 1

你想做什么（至少，我理解的）不是"responsive"的问题。您只是想让整个页面内容始终居中。（acehardware.com 不是响应式天气）。

您只需要为主 div（包含整个页面内容，背景除外）定义一个恒定宽度，然后使其在外部 div 居中, 无论屏幕大小。

这就是你要做的：

#main-wraper {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 360px;
    height: 420px;
    position: relative;
    left: 50%;
    margin-left: -180px;
    background-color: white;
    color: black;
}

#outter-div {
    background-color: grey;
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: hidden;
}

<div id='outter-div'>
    <div id='main-wraper'>
        <!-- The whole page content -->
    </div>
</div>

这将使div在父容器中居中，屏幕越小，父容器就会隐藏。

我在代码片段中使用了较小尺寸的主包装器，以便您更容易在较小的盒子中观看效果。但是你应该使用你自己的宽度。请记住，div 的 "left margin" 必须具有 "half the width of the div" 作为负值。 "left: 50%" 将始终居中 div 并保持效果。

居中固定宽度的页面内容

Centering Fixed Width Page Content

html

css

resize

window-resize

twitter-bootstrap