css - 如何在页面水平居中的 div 下方显示图像？

Question

我有这样的布局:

代码在这里:http://m6000225.ferozo.com/test/

我需要将蓝色和棕色图像放在主要内容 div 下方，并且无论窗口宽度如何都对齐，并且都水平居中。
我实现了一个我在这个网站上读到的 css 技巧，它有一个带有绝对位置的 div 和 left: 50% 以及一个带有相对位置和 left: -50% 的 img inside。它工作正常，除了它会将页面宽度向右推，正如您在屏幕截图中看到的那样，可以看到滚动条。
欢迎使用 jQuery 等第三方库解决方案，但我更喜欢纯 CSS。

PS:我在页脚下方也需要类似的东西，但我想使用具有负底值的相同解决方案应该可行，对吧？

PS2:将蓝棕色 strip 延伸到窗口的两个边界没有问题，因为我已经使用了另一个具有绝对位置和背景重复的 div:repeat-x。

Answer 1

出现滚动条是因为类 .header-image 上的 left: 50%;。你应该完全放弃它。由于该标签设置了宽度，当您将其推到 50% 以上时，它会落在窗口之外，从而强制显示滚动条。

在您放弃 left 调用之后，您应该将那个 div 的宽度设置为窗口的宽度，而不是一个以像素为单位的特定值。使用 宽度:100%。因此，该标记应如下所示:

.header-image {
  height: 245px;  
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: -1;
}

之后，您需要将包含在 div 中的图像重新居中。为此，不要使用位置(依赖于设置的边界)，而是为元素提供自动边距。使用:

.header-image img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

这将使图像重新居中。如果这就是您要找的，请告诉我!