html - 容器在缩小浏览器窗口时移动

Question

我正在使用自己制作的容器，但是，当我调整浏览器窗口的大小时，容器会沿着窗口移动，我希望它在你的位置保持静态。

这是CSS：

.container {
margin-right: auto;
margin-left: auto;
width: 1000px; /* yes, because style of PSD file. need follow design */
}

score 1 · Accepted Answer

margin: auto.container根据其父元素的宽度居中。

.container有一个具有流体宽度（例如 100%）的父元素。当您调整窗口大小时，此元素的宽度会发生变化，因此您的容器将根据该新宽度自动居中。

有几个解决方案：

1）包裹.container在一个固定宽度的元素内，在浏览器调整大小时不会改变。

CSS：

.wrapper-fixed-width {
    width: 500px;
}

HTML：

<div class="wrapper-fixed-width">
    <div class="container bg">The parent element has a fixed width (pixels)</div>
</div>

2) 将固定边距大小设置为.container

CSS：

.container {
    margin: 0 50px;
}

这是一个显示这些示例的 JS Fiddle：

1 回答 1