0

我知道这个问题以前一定被问过很多次，但我确实看过已经存在的答案，但似乎没有任何效果！我已经在元素上定义了宽度，尝试删除浮动：左（这似乎没有居中，它也破坏了我的布局..），尝试将其设置为显示：块，我在使用页脚清除浮动之前做过所有这一切，也尝试使用 text-align center 。但是，是的，似乎没有什么可以把它放在中心位置。

.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 并将左栏、内容和右栏 DIV 放入其中。我相当确定所有内容都符合其 DIV 的宽度限制。

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

之前我做了一个两列布局，看起来效果很好；它居中很好，无需删除浮动或类似的东西。也使用了我在上面段落中提到的 display:none 来阻止事物。两列页面工作得很好。

谢谢。

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

4

2 回答 2

0

这对我有用

<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/

于 2013-10-11T09:29:14.133 回答
0

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

于 2013-10-11T08:31:38.247 回答