你好。我正在制作一个 HTML/CSS 教程,但我在定位和那些东西方面遇到了一些问题。我的标题处有 3 个堆叠元素,并希望它们位于最中间。
所以我尝试这样的事情:
.container {
margin: 0 auto;
width: 940px;
}
在我的 CSS 代码中,并将此类添加到那些元素。它正在识别命令,因为它移动了一点。但不是我预期的方式:
它留在左边,向右再走几步。有趣的是:如果我放一些类似的东西
.container {
margin: auto 50% auto 50%;
width: 940px;
}
它的行为是:
它居中,但扩展了屏幕长度并放置了一个滚动条。为什么?这两个选项不应该以我的元素为中心吗?我可以做些什么来实现我的目标?非常感谢您的回答,因为我在尝试理解这部分时遇到了很多困难。
最佳答案
在您的第一个示例中,元素居中很好 - 它仍然只有 940 像素宽,几乎整个浏览器,因此离左边缘不远。如果您还想将其包含的元素 居中,只需向其添加text-align:center
。
为了更好地了解发生了什么,可以考虑暂时向元素添加一个 background:red
,这样很多事情会更清楚。它使学习 CSS 更容易实际看到 box model 的“框”做他们的工作。
在您的第二个示例中,您似乎混淆了 margin
声明的值的顺序。您实际上为它设置了 50% 的左右边距,使其左边缘确实位于中心。然后 940 像素的宽度使其向右拉伸(stretch),仍然是 940 像素宽,从而导致滚动条。
关于html - CSS:试图使一些元素居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27051442/