Html 将页面内容居中对齐

到目前为止，我一直在尝试将页面上的

#main

div居中对齐，但没有成功

所讨论的页面是通用页面

我一直在应用css

margin:0px auto

到

#main

div，但我无法使其居中对齐

---

我希望内容在大屏幕上居中对齐，但浮动菜单栏是相同的。有谁能帮我做到这一点吗？我迷路了。

只要不设置宽度，页边距的“自动”值就无效。因此，必须设置div#main的宽度

---

请看此处的purble框。

只要不设置宽度，页边距的“自动”值就无效。因此，必须设置div#main的宽度

看看这张图片中的purble框。

只需添加以下内容：

#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>

简单的虚拟文本
简单的虚拟文本
简单的虚拟文本

不能执行宽度：100%，因为需要定义居中的图元的宽度，而不是父图元的宽度

编辑：

我在

jsFiddle.net

上创建了演示，只需添加以下内容：

#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>

简单的虚拟文本
简单的虚拟文本
简单的虚拟文本

不能执行宽度：100%，因为需要定义居中的图元的宽度，而不是父图元的宽度

编辑：

---

我在

jsFiddle.net

上创建了一个演示。首先，您的HTML有一个问题。您在一个页面中应用了两次ID（

main

）。ID是唯一的，即每页只能使用一次。类可以被任意使用

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

.right {
  width: 200px;
}

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

---

别忘了删除第二个ID。它位于主包装的第一个子项上（不幸的命名）

首先，你的HTML有一个问题。您在一个页面中应用了两次ID（

main

）。ID是唯一的，即每页只能使用一次。类可以被任意使用

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

.right {
  width: 200px;
}

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

---

别忘了删除第二个ID。它位于

#main wrapper

（不幸的命名）

的第一个子项上。我是否将宽度设置为100%？：$我把它设置为100%，但它仍然不能工作。我遗漏了什么吗？你能像上面的演示一样将它设置为600px吗（见紫色方框）？谢谢你的帮助。将你和上面的人都重复一遍，但会接受上面的答案，对不起：（我是否将宽度设置为100%？：$我将宽度设置为100%，但它仍然不能工作。我是否缺少一些内容？你是否可以将其设置为如上面演示中的600px（参见紫色框）？谢谢你的帮助。把你和上面的人都重复一遍，但会接受上面的回答，抱歉：（有效，将宽度设置为1321px-内容的实际宽度，它成功了！有效，将宽度设置为1321px-内容的实际宽度，它成功了！这就是造成这些混乱的博主：）我真的什么也做不了：（WordPress有一天我希望：P是哪个博主造成了这些麻烦：（WordPress有一天我希望：P