Question

我需要inner_holder的宽度为960px，我需要它居中。我尝试使用宽度：960px和margin：0px auto但它不起作用。如何将div放在inner_holder内？

HTML：

<div class="parent_container">
    <div class="inner_holder">
        <div class="column column1">
            <div class="inner_clip"></div>
        </div>
        <div class="column column2">
            <div class="inner_clip"></div>
        </div>
        <div class="column column3">
            <div class="inner_clip"></div>
        </div>
    </div>
</div>

CSS：

.parent_container {
      height: auto;
      margin: 15px auto;
      min-height: 500px;
      width: 960px;
}
.column {
     float: left;
     margin-right: 50px;
}
.inner_clip {
    background-color: #333333;
    height: 250px;
    margin-bottom: 20px;
    width: 250px;
}

Answer 1

尽可能see here “包含浮动元素的div”实际上位于中心（红色）。

我假设您想要将浮动元素本身居中，而不是它们的父级。我担心你不能这样做（据我所知）。但是，如果您实际上float不依赖于您的元素，那么您可能只想display .colum inline-block text-align:center并设置.parent_container { text-align:center; // added } .column { display: inline-block; // added margin: 0 25px; // added float: left; // removed margin-right: 50px; // removed }父节点。

对CSS的更改：

{{1}}

的 Result as Fiddle

Answer 2

我试图永远弄清楚这一点。上面的答案是将“display：inline-block”分配给div中的元素，然后将“text-align：center”分配给父div工作但是但是......我的父母div上有一类“clearfix”，显然是把整个事情弄糟了。一旦我删除了那个clearfix类，一切都很好地集中在一起（当然是徒劳无益的挫折之后;）。希望这有助于某人。

如何居中对齐包含浮动元素的div？

2 个答案: