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

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

正如你在这里看到的那样,"包含浮动元素的div"实际上位于中心(红色).

我假设您想要将浮动元素本身居中,而不是它们的父级.我担心你不能这样做(据我所知).但如果你是不依赖于实际的元素floatING,你propably只是想display你.colum作为inline-block与text-align:center设置为父.

对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