居中固定宽度页面内容

Question

我甚至迷失在哪里开始，所以我会尝试解释。我在Aptana Studio为我的学期项目制作了一个五金店，并在谷歌浏览器中运行该网站。显然，在Google Chrome中运行网站会让它自动响应？正如您在以下屏幕截图中看到的那样，该站​​点在左侧固定，在右侧响应：

（调整大小1）

（调整大小2）

（调整大小3）

（调整大小4）

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

网站中的所有内容都受限于某些维度。当页面完全打开时，内容居中并且两侧都有一个空白区域。当页面调整大小（更小）时，边距开始消失，直到最后有一个截止点 - 并且内容不再改变位置。

（整页）

（首先调整大小）

（第二次调整大小 - 即使页面较小，内容也是固定的）

这正是我尝试使用我的硬件商店网站的原因。我该如何达到这个效果？我听说过bootstrap，但我真的不太了解它或者我会使用哪个模板。感谢您的帮助/ adivce。如果在这里解释得太复杂，请发给我一个你可能知道的好教程。

Answer 1

你想要做的事情（至少，我所理解的）不是“回应”的问题。您只是想保持整个页面内容始终居中。 （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的“左边距”必须具有“div的宽度的一半”作为负值。 “left：50％”将始终以div为中心并保持效果。