将页面内容居中对齐

Question

到目前为止，我一直在尝试在页面上居中对齐#main div，但一直没有成功。

有问题的页面是一个通用页面。

我一直将css 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

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

看看这个demo中的purble盒子。

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的第一个孩子上(不幸的命名)