我正在尝试创建一个在页面上水平居中的 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
最佳答案
看看这个 fiddle :http://jsfiddle.net/vvqZj/
想法是给包含文本的div
-1000px
的左边距和1000px
的左填充,所以背景将从文本开始位置左侧 1000 像素处开始。
此方法的缺点是您需要在文本周围放置另一个包装器,该包装器将包含文本的 div 居中。这是因为您无法将 margin: auto
设置为包含文本的 div,因为您会覆盖此 div 的左边距。
关于html - 居中的 div,每边有不同颜色的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20673371/