Question

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

我尝试了以下内容。

<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

看看这个小提琴：http://jsfiddle.net/vvqZj/

我们的想法是让包含文本的div左边距为-1000px，左边距为1000px，因此背景将从文本开始位置的左侧开始1000px。

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

Answer 2

请查看http://jsfiddle.net/raunakkathuria/qhFaD/3/

更改

 #holder{
background:#3B92C0;
position:relative;
margin:0 auto; 

 }
#text{
position:relative;
width:500px;
background:#555;
text-align:left;
margin:0 auto; 
color:#fff;
 }

Answer 3

没有尾巴！

http://jsfiddle.net/t2SYv/

<div id="regular">THis is a regular centerd div</div>
<div id="holder">
      <div id="text">
        This looks good when window is small but when it grows it gets a tail<br>
          How do i get rid of this tail when window is big ---------------&gt;
      </div>
      <div id="filler"></div>
</div>

CSS：

#regular
{
    background:#ccc;
    height:200px;
    margin:0 auto 10px;
    width:500px;
}

#holder
{
    background:#3B92C0;
    margin:0 auto;
    min-width:500px;
    position:relative;
    text-align:center;
}

#text
{
    background:#555;
    color:#fff;
    display:inline-block;
    margin:0 auto;
    position:relative;
    text-align:left;
    width:500px;
    z-index:2;
}

#filler
{
    background:#FFF;
    display:inline-block;
    height:100%;
    position:absolute;
    right:0;
    width:50%;
    z-index:1;
}

中心div，每侧有不同颜色的边距

3 个答案: