将与内容区域相关的网站居中，其中内容区域小于分隔符 div答案

【问题标题】：Centering website related to content area where content area is smaller than divider divs将与内容区域相关的网站居中，其中内容区域小于分隔符 div
【发布时间】：2014-10-06 14:18:56
【问题描述】：

我有一个网页，其中整个页面的页脚、页眉和分隔符 div 比内容区域 div 本身更宽。

我将网站置于以下位置：

.wrap {

width: 1500px;
margin: 0 auto;

}

当我将窗口调整为更小的尺寸时，一旦 WIDER 页脚、页眉和分隔符 div 到达屏幕的左/右侧 - http://bit.ly/1nWeHn4，居中的视图就会被破坏。

我需要的是它只在内容区域到达浏览器屏幕末尾时停止。

我尝试将更宽的 div 的宽度更改为：

max-width: 1500px;
min-width:960px;

如果我更宽的 div 具有坚实的背景，它可以解决问题并且可以正常工作，但是我的分隔 div 不是。结果，我可以在调整屏幕大小时看到分隔线“移动” - http://bit.ly/1vFxAJR

我确信有一个简单的解决方法，我只是不知道它是什么 :D

【问题讨论】：

我的 macbook air 屏幕尺寸甚至无法查看整个网站以查看会发生什么：p 但我想您没有在 div 上设置 %，但 px 可能也设置了最小宽度高
看，我不希望我们的 Mac 朋友感到受到任何限制，他们已经每天都这样做了：P
我猜你还没有尝试过mac...
让我们不要把它关闭顶部的 mac/win 线程，不，我确实尝试了很多
@emmanuel 一旦达到 1500px 宽度，内容区域就会开始视觉上与分隔线相关的移动

标签： html css

【解决方案1】：

为了使 divider 随内容移动，您必须将 background-position 设置为 background 属性。

.divider { background: url("sprite.png") no-repeat scroll center 0 rgba(0, 0, 0, 0);

* 也按照您的建议将 background-repeat 更改为 no-repeat

【讨论】：

抱歉回复晚了，你是最棒的！