Question

我已经看到了几种使用CSS创建简单固定宽度单列布局的方法。我喜欢显示here的那个，因为涉及的代码很少，并且它适用于我尝试的每个浏览器。

#container {
  margin: 0 auto;
  width: xxxpx;
  text-align: left;
}

<body>
  <div id="container">
    ...entire layout goes here...
  </div>
</body>

提交人提到他受到了一些批评。我不是网络开发人员所以我想问社区他们对这种方法的看法。更具体地说，是否有更好/更兼容的方法来实现这一目标？

Answer 1

“margin：0 auto”是执行此操作的最佳方式，您只需确保使用正确的doctype即可。我总是严格使用XHTML - 其他人也会工作。如果您没有良好的doctype，则内容将不会以IE6为中心

要实现XHTML严格doctype，请将其放在您的节点上方，作为页面的第一行：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 2

margin: 0 auto;（或margin-left: auto; margin-right: auto;）确实是最简单的方式。并且坚持使用内容集中内容确实没有问题。

我认为宽度标记应为max-width: xxxpx。对于那些宽度为360px或更小的移动浏览器的用户而言，他们只需获得适合其屏幕大小的容器的最大尺寸（但是你的内部布局也必须优雅地扩展。）另外值得注意的是{ {1}}无法在IE6上运行。

Answer 3

您概述的方法是我使用的方法。我已经使用它好几年了，它没有让我失望。我想不出批评会是什么。

Answer 4

margin: 0 auto;是集中化的最佳方法。

您引用的文章作者表示，text-align: center;需要支持IE5 / Win。我认为你可以放心地忽略这一点，因为IE5已经完全死了。

Answer 5

我认为这是一个更好的解决方法。

当包含在600px宽的div id="pagebox"内时，将整个页面的内容居中。

body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }