html - 没有 div 的内容居中

Question

我最近遇到了这篇“文章”，它解释了如何仅使用 html 和 body 标签来居中内容。但是我想不通的是如何制作一个全宽的页眉和页脚，同时仍然使用这种方法使我的内容居中。有什么建议么？

score 1 · Accepted Answer

我不认为你可以，如果你将body标签用作 a div，那么它里面的任何其他divs 将只有body标签的宽度。所以

body {
    width: 200px; 
    margin: 20px auto; 
    padding: 20px;
    border: 1px solid black;
}

将使任何divs 的最大宽度为 200px。

看到这个jsfiddle。

score 0 · Accepted Answer

本文解释说，您可以将内容居中， margin: 20px auto; 您需要为页脚和页眉提供相同的 CSS。至少，如果您使用 div 块，它会更容易、更易读和更有条理。也就是说，div 块的用途是……构建您的网站。

score 0 · Accepted Answer

编辑：我误读了这个问题并将我的答案改写为：

有两种方法可以实现您想要的。首先是绝对定位元素，使其脱离流程并允许您扩展主体外部的宽度，但这会使某些元素复杂化。二是使用负边距。我被拉走了，但如果没有其他人这样做，我稍后会尝试举一个例子。

编辑：很快就把这个拍了。

<!doctype html>
<style>
        body{width:980px;margin:0}
        p{position:absolute;width:100%;background:#ccc;}
</style>
<p>One</p>

3 回答 3