代码之家 › 专栏 › 技术社区 › Lawrence Barsanti

使用css集中网页内容的最佳方式是什么?

css html

Lawrence Barsanti · 技术社区 · 15 年前

我见过几种使用CSS创建简单的固定宽度单列布局的方法。我喜欢这张 here 因为所涉及的代码很少,而且它可以在我尝试过的每个浏览器上运行。

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

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

8 回复 | 直到 8 年前

James Maroney 15 年前

“margin:0 auto”是最好的方法,您只需确保具有正确的doctype即可工作。我总是严格使用XHTML,其他人也可以。如果没有一个好的doctype,那么内容就不会集中在IE6中

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

Crast 15 年前

margin: 0 auto; margin-left: auto; margin-right: auto; )这真的是最简单的方法,而且坚持以它为中心内容也没有什么问题。

我认为宽度标签应该是 max-width: xxxpx . 对于那些使用360px或更小宽度的移动浏览器的用户,他们只需获得与屏幕尺寸相匹配的容器的最大可能尺寸(但是,您的内部布局也必须优雅地缩放)。另外值得注意的是 max-width

calvinlough 15 年前

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

AUSteve 15 年前

margin: 0 auto;

你提到的那篇文章的作者说 text-align: center; 需要支持IE5/Win。我认为你可以放心地忽略这一点,因为IE5已经完好无损了。

Qwerty 10 年前

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

这将 将整个页面的内容居中 div id="pagebox" 600像素宽。

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

指定一个 min-width body pagebox 元素本身。
这可以防止在windows上使用Navigator 6+/Mozilla时,在狭窄的浏览器窗口中出现负的(即不可访问的)左边距。

MSIE 5不以 auto "text-align:center"

希望能有帮助

Community CDub 7 年前

margin: 0 auto;

还可以设置标签的样式,如 <center> are deprecated

Tom 15 年前

最好的方法就是创建一个div,比如说960px宽,并给它{margin:0auto;}。

我还想做的是给这个div一些{padding:015px;}。这样,中心区域实际上是990px,在1024x768显示器中仍然完全居中对齐,而填充物在边缘为使用较小显示器或谷歌Chrome的用户提供了缓冲。

更进一步,我实际上创建了一个包装器div,它占据整个页面,然后将一个内容div放在其中。这让我可以利用像页脚这样的东西,不管内容长度如何,页脚总是粘在屏幕底部(例如 http://ryanfait.com/sticky-footer/

-8

Noon Silk 15 年前

老实说,我只是用 <center> 标签。我想它已经过时了(你可能会收到一些关于它的抱怨,这可能取决于你的doctype),但它可以工作。

好吧,在这方面的反对票是可以合理预测的,但我确实希望有人能确切地说明为什么(除了学究气)这不起作用;因为据我所知,它适用于所有浏览器。我可能错了:)