Question

我知道这个问题之前肯定已被多次提出过，但我确实已经看过现有的答案，似乎没有任何效果！我已经在元素上定义了宽度，尝试删除float：left（这似乎不会使它居中并且它也会破坏我的布局..），尝试将其设置为display：block，我在使用页脚清除浮动之前做了所有这一切，尝试使用文本对齐中心。但是，似乎没有任何东西可以集中在它上面。

.container3col {
    width: 1200px;
    background: #FFFFFF;
    margin: 0 auto;
    display:block;
}

.leftbar {
    width: 180px;
    padding-bottom: 10px;
    background:#00FF00;
    float:left;
    }
.content {
    padding: 10px 0;
    width: 840px;
    background:#FF0000;
    float:left;
}
.rightbar {
    width: 180px;
    padding: 10px 0;
    background:#00F;
    float:left;
}

我的HTML部分目前确实包含很多内容，所以发布它可能有点麻烦。基本上我创建了一个容器DIV并将leftbar，content和rightbar DIV放在其中。我很确定所有内容都符合其DIV的宽度限制。

可能影响我的代码的一件事是我确实使用脚本来更改display：none;显示：阻止（以便用户可以单击链接并加载文章的其余部分）。

我之前做了两列布局似乎完美无缺;它中心很好，无需移除浮子或类似的东西。如上所述，我还使用了display：none to block thing。两个专栏页面完美无缺。

感谢。

编辑：这是一个小提琴。由于很多内容是不必要的（即文章只是填充文本），我删除了一些内容。 http://jsfiddle.net/Snail489/W6C9v/6/

Answer 1

而不是margin: 0 auto;尝试text-align:center

Answer 2

这对我有用

<style>
/* CSS Document */
body {
    font-size:12px;
    color:#000000;
    font-family: Tahoma, Geneva, sans-serif;
    }
.container3col 
    {
     width: 1200px;
     margin: 0 auto;
     display:block;
    }

.leftbar {
    width: 180px;
    padding-bottom: 10px;
    background:#5F5;
    float:left;
}

.content {
    padding: 10px 0;
    width: 840px;
    background:#F55;
    float:left;
}

.rightbar {
    width: 180px;
    padding: 10px 0;
    background:#5FF;
    float:left;
}

.header {
    width:1200px;
    background:url(../texture.jpg);
}

.footer {
    background: #FFF;
    position: relative;
    clear: both;
    background:url(../texture.jpg);
}
</style>

检查我的jsfiddle：http://jsfiddle.net/pB2aC/

margin：0 auto似乎不是居中

2 个答案: