居中对齐页面的内容答案

【问题标题】：Center Align Contents Of A Page居中对齐页面的内容
【发布时间】：2012-05-27 02:46:52
【问题描述】：

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

相关页面是通用页面。

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

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

【问题讨论】：

【解决方案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.nethere上创建了演示

【讨论】：

【解决方案2】：

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

看看这个demo中的紫框。

【讨论】：

【解决方案3】：

首先，您的 HTML 存在问题。您在一个页面中应用了两次 ID (main)。 ID 是唯一的，即每页只能使用一次。类可以随心所欲地使用。

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

.right {
  width: 200px;
}

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

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

【讨论】：