Question

我试图让我的网站的主容器在资源管理器窗口较大时自动居中，或者在资源管理器窗口缩小时粘在左侧。

如何使用CSS实现这一目标？

现在大多数网站都是这样做的，例如bloomingdales.com。

当您缩小浏览器时，主容器会保留在左侧，只要您在右侧打开浏览器，主容器就会自动居中。

谢谢！

我的网站：www.tahara.es

添加CSS：

body {
margin: 0 auto;
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}

.mainContainer
{
position: absolute;
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}

Answer 1

body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}

.mainContainer
{
width: 850px;
min-width: 850px;
margin: 0 auto;
border: 0;
}

Answer 2

这应该这样做：

body {
  font-size: 11px;
  font-family: Arial,Helvetica,Verdana,Sans-serif;
  color: black;
  font-weight: normal;
}

.mainContainer {
  width: 850px;
  min-width: 850px;
  margin: 0 auto;
  border: 0;
}

View on JSFiddle

关键是你的div上没有position: absolute;。该属性从正常文档流中删除元素，使其没有父元素。 margin: 0 auto;确定父元素的左右边距。把两个和两个放在一起，你会发现它们不相容。

带有css div的自动中心主容器

2 个答案: