html - CSS:试图使一些元素居中

Question

你好。我正在制作一个 HTML/CSS 教程，但我在定位和那些东西方面遇到了一些问题。我的标题处有 3 个堆叠元素，并希望它们位于最中间。

所以我尝试这样的事情:

.container {
  margin: 0 auto;
  width: 940px;
}

在我的 CSS 代码中，并将此类添加到那些元素。它正在识别命令，因为它移动了一点。但不是我预期的方式:

它留在左边，向右再走几步。有趣的是:如果我放一些类似的东西

.container {
  margin: auto 50% auto 50%;
  width: 940px;
}

它的行为是:

它居中，但扩展了屏幕长度并放置了一个滚动条。为什么？这两个选项不应该以我的元素为中心吗？我可以做些什么来实现我的目标？非常感谢您的回答，因为我在尝试理解这部分时遇到了很多困难。

Answer 1

在您的第一个示例中，元素居中很好 - 它仍然只有 940 像素宽，几乎整个浏览器，因此离左边缘不远。如果您还想将其包含的元素 居中，只需向其添加text-align:center。

为了更好地了解发生了什么，可以考虑暂时向元素添加一个 background:red ，这样很多事情会更清楚。它使学习 CSS 更容易实际看到 box model 的“框”做他们的工作。

在您的第二个示例中，您似乎混淆了 margin 声明的值的顺序。您实际上为它设置了 50% 的左右边距，使其左边缘确实位于中心。然后 940 像素的宽度使其向右拉伸(stretch)，仍然是 940 像素宽，从而导致滚动条。