使用CSS定居内容

Question

我有一个垂直划分为3个部分的HTML页面。顶部的背景是白色的。中间部分的背景是灰色的。底部是黑色的。无论用户的屏幕分辨率如何，我都希望这些背景颜色可以拉伸整个页面宽度。我有这个工作。

我有一些宽度为800px的内容。我希望这些内容在每个部分中水平居中。不幸的是，我似乎无法让它发挥作用。我究竟做错了什么？这是我的代码：

<div style="background-color:white;">
    <div style="text-align:center;">
       Welcome!
    </div>
</div>

<div style="background-color:silver;">
    <div style="text-align:center;">
       Navigation
    </div>
</div>

<div style="background-color:black;">
    <div style="text-align:center;">
      Some Text
    </div>
</div>

Answer 1

text-align：center只是使文本中心对齐，而不是左对齐或右对齐。

您要做的是在每个div上设置一个类：

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

margin：0 auto将使800px宽的框在屏幕中居中。