Question

那边是Hy。我正在修改一个HTML / CSS教程，我在定位和那些东西方面遇到了一些问题。我的标题中有3个叠加元素，希望它们位于中心位置。

enter image description here

所以我尝试这样的事情：

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

在我的CSS代码中，并将此类添加到这些元素中。它正在承认这些命令，因为它有点移动。但不是我预期的方式：

enter image description here

它在左侧重新出现，向右侧再向前迈出几步。有趣的是：如果我放了像

这样的东西

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

它的行为是：

enter image description here

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

Answer 1

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

为了更好地了解发生了什么，请考虑暂时向元素添加background:red，并且会更清楚。它使学习CSS更容易实际看到＆＃39;框＆＃39; box model做他们的工作。

在您的第二个示例中，您似乎混淆了margin声明的值的顺序。你实际上给它一个50％的左右边距，把它的左边缘确实放在中心位置。 940像素宽度然后使其向右延伸，仍然是940px宽，从而导致滚动条。

Answer 2

.container { text-align:center }

试一试。

Answer 3

如果您添加了html，也可以直接解决。