居中页面

Question

我的页面居中问题。除了左边框和右边框之外，所有内容都正确居中。我认为问题出在border-right-width:300px; border-left-width:300px;行，但我不确定另一种设置方式。还有另一个解决方案是左右边框也与页面对齐。有任何想法吗？ 这是我的CSS：

body {    
    margin:auto;
    padding: 0;
    background: #FFFFFF;
    font: 12px/1.4 Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    border-right-style:solid;
    border-left-style:solid;
    border-right-width:300px;
    border-left-width:300px;
    border-color:#E8E8E8;
}

Answer 1

使用margin：auto时，您还必须指定宽度。我认为你试图用身份背景＃E8E8E8来集中身体的内容。这样做

body {
    margin:auto;
    padding: 0;
    font: 12px/1.4 Verdana, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    width: 1020px; //or anything else you want
    background:#E8E8E8;
}

Answer 2

你不能把任何没有宽度的东西放在中心，或者是100％的父级div，因为它与任何东西无关。

如果你打算使用你的身体，你需要这样的东西：

body{
    width:980px;
    height:100%:
}

大多数人所做的是使用容器或包装。这让你有更多的控制权。

.container{
    width:980px;
    height:100%;
    position:relative;
}

你可以看到我把容器当作类和一个位置：亲属。这允许您在同一页面上多次使用它。

Answer 3

你需要将div本身集中在一起，就像这样：

div.page {
    margin: 0 auto;
}