html - 如何居中对齐包含 float 元素的 div？

Question

我需要 inner_holder 的宽度为 960px 并且我需要它居中。我尝试使用 width: 960px 和 margin: 0px auto 但它不起作用。如何让 inner_holder 中的 div 居中？

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 “包含 float 元素的 div” 实际上位于中心(红色)。

我假设您想将 float 元素本身而不是它们的父元素居中。恐怕你不能那样做(据我所知)。但是，如果您不依赖于您的元素实际上 float ，您可能只想显示您的.colum作为内联-将 text-align:center 设置为父级的 block 。

CSS 的变化:

.parent_container {
    text-align:center;     // added
}
.column {
    display: inline-block; // added
    margin: 0 25px;        // added
    float: left;           // removed
    margin-right: 50px;    // removed
}

Result as Fiddle