Question

例如facebook主页等网站。

https://www.facebook.com/

内容居中，但背景颜色为100％宽度。如何做到这一点？

我如何在包装器中执行此操作？

Answer 1

首先，你需要一个100％的容器元素（例如body）。你可以用你想要的任何方式给它上色。

然后你需要另一个宽度固定的容器（一个元素）。然后在该部分中添加以下行：

#div_id {
  width: 600px;
  margin-left: auto;
  margin-right:auto; 
}

此代码将设置内容块的固定宽度，并指定左右自动边距。这是在页面中居中阻止元素的一种简单方法。

Answer 2

扩展@opalenzuela的答案。他的回答是完全可以接受的，只是为你拼出一点。

CSS：

body {
margin:50px 0px; padding:0px;
text-align:center;
background-color:#eee;
}

#Content {
width:500px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
}

HTML：

<body>
<div id="Content">
Put your content here.
</div>
</body>

小提琴玩：http://jsfiddle.net/2mZeQ/

Answer 3

我认为没有包装元素是不可能的，或者可以通过使用javascript（jQuery）和一些大小的计算和定位，但我认为 javascript不是这种情况下的方式

如何以居中内容100％宽度div？

3 个答案: