css - 将背景图像居中到具有最小宽度的 div，即使页面比 div 窄

Question

html

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

CSS

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

这段代码很好地居中了我的背景图像，除了当我的浏览器变得比#inner 的 960px 宽度更窄时。在这种窄浏览器的情况下，#inner 和#outer 保持其预期的 960px 宽度(提供水平浏览器滚动条)，但#outer 上的背景图像本身以浏览器窗口为中心，而不是#outer div。如何保持背景图片以 div 为中心而不是以浏览器窗口为中心？

Answer 1

我实际上不知道为什么会发生这种情况的真正答案，但如果您将宽度应用到外部，它现在将以您想要的方式显示。这不是我认为模型的工作方式。很困惑:/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

好的，这也可以，但 IE7 或 IE6 不支持

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

这是非常奇怪的行为，但显然如果你有一个没有指定宽度的 div，即使子项比父项宽，父项也只会和屏幕一样宽。