CSS：嘗試將某些元素居中

Question

你好 我正在編寫HTML / CSS教程，並且在定位和這些方面遇到了一些問題。 我在標頭處有3個堆疊的元素，並希望它們位於最中心。

所以我嘗試這樣的事情：

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

在我的CSS代碼中，並將此類添加到這些元素中。 它已經識別了命令，因為它移動了一點。 但不是我所期望的：

它重新出現在左側，向右僅幾步。 有趣的是：如果我放類似

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

它的行為是：

它以GETS為中心，但延長了屏幕長度並放了一個滾動條。 為什么？ 這兩個選項都不應該放在我的元素中心嗎？ 我該怎么做才能實現自己的目標？ 我非常希望得到一個答案，因為在嘗試理解這一部分時會遇到很多困難。

Answer 1

在您的第一個示例中，該元素居中對齊-仍然只有940像素寬，幾乎覆蓋了整個瀏覽器，因此離左邊緣不遠。 如果您也想使其包含的元素居中，只需向其添加text-align:center即可。

為了更好地了解正在發生的事情，請考慮暫時將background:red添加到元素中，這樣會更加清晰。 它使學習CSS噸變得更容易實際看到盒子模型的“盒子”正在工作。

在第二個示例中，您似乎混淆了margin聲明的值順序。 實際上，您為它提供了50％的左右邊距，將其左邊緣確實居中。 940像素的寬度然后使其向右伸展，仍然為940px寬度，從而導致滾動條。

Answer 2

.container { text-align:center }

試一試。

Answer 3

如果您也添加了html，這將很容易解決。