使用CSS使内容居中

Question

我有一个HTML页面，这是垂直分为3个部分。顶部的背景是白色的。中间部分的背景是灰色的。底部是黑色的。我希望这些背景色可以拉伸整个页面的宽度，而不管用户的屏幕分辨率如何。我让它工作起来了。

我有一些内容是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
}

自动边距:0将使800px宽的方框居中显示。