html - 居中的 div，每边有不同颜色的边距

Question

我正在尝试创建一个在页面上水平居中的 div。在 div 的左侧，我想要与 div 相同的背景颜色。在右边，我想要与背景相同的颜色。我的问题是随着窗口变大，div 的大小增长得比它应该的快，我在 div 的另一端得到一个 til。我该如何解决这个问题？

我试过以下方法。

<div id="holder">
  <div id="text">
    Text goes here
  </div>
</div>

我的CSS:

#holder{
background:#3B92C0;
position:relative;
min-width:1090px;
left:-200px;

 }
#text{
position:relative;
width:1090px;
border:0 auto; 
left:200px;
 }

这里是 fiddle

Answer 1

看看这个 fiddle :http://jsfiddle.net/vvqZj/

想法是给包含文本的div -1000px 的左边距和1000px 的左填充，所以背景将从文本开始位置左侧 1000 像素处开始。

此方法的缺点是您需要在文本周围放置另一个包装器，该包装器将包含文本的 div 居中。这是因为您无法将 margin: auto 设置为包含文本的 div，因为您会覆盖此 div 的左边距。