在较小的容器内溢出较大的容器并使其居中

Question

基本上，我正在寻找一种方法，将容量为1600px的容器置于940px的容器中。

我希望页面始终保持居中，网站的主要内容为940px宽。我有一个1600像素的图像，只是添加图像强制图像左边与940px容器对齐，溢出到右边660px。有关示例，请参见下图。

我想要的是在940px容器中居中的图像，并保存以添加多个背景图像，这实际上不是IE8友好的，我不知所措。

我以前从未真的这么做过，所以我从来没有遇到过这个问题。

现在，我将页面设置为1600px的主容器。这是有效的，但是当您打开页面时，页面从1600px容器的最左侧开始，主要内容显示为未中心。

以下示例2是我正在寻找的。

非常感谢任何帮助。谢谢你们和gals！

Answer 1

您可以在图像上设置负边距。您可以使用Javascript计算实际数字，但如果它在940内总是为1600，那么您可以设置330px的负边距。

（容器宽度 - 内容宽度）/ 2 =左边距

#container img { margin-left:  -330px; }

Answer 2

您可以使用javascript获取两个div的宽度，然后取两者之间的差值（1600-940 = 660px）。将其除以2为中心（330px）。然后将容器放置在该量（-330px）。

Answer 3

或者您可以使用以下属性将1600容器相对于Page居中：

left: 50%;
margin-left: -800px;