中心对齐页面内容

Question

到目前为止，我一直试图将#main div居中对齐，但我没有成功。

相关网页是一个通用页面。

我一直在将margin: 0px auto;应用于#main div，但我无法使其居中对齐。

我希望内容在大屏幕上居中对齐，但浮动菜单栏是相同的。有人可以帮助我实现这个目标吗？我迷路了。

Answer 1

只需添加：

#main {
      margin: 0 auto;
      width: 600px;
      background-color: #EEEEEE;
      text-align: center;
}

如此简单的HTML示例：

<div id="main">
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
    <span>Simply dummy text</span>
</div>

您不能width: 100%，因为您需要定义您居中的元素的宽度，而不是父元素。

修改

我在jsFiddle.net here

上创建了演示

Answer 2

只要没有设置宽度，边距值就不起作用。因此，您必须设置div＃main的宽度。

查看此demo中的简单框。

Answer 3

首先，您的HTML存在问题。您在一个页面中应用了两次ID（main）。 ID是唯一的，即每页只能使用它们。可以根据需要使用类。

#main {
  width: 1320px;
  margin: 0 auto;
}

.right {
  width: 200px;
}

.bigpic {
  width: 540px;
  /** and  remove max-width **/
}

不要忘记删除第二个ID。这是#main-wrapper的第一个孩子（不幸的命名）