html - 居中对齐页面内容

Question

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

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

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

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

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