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

ariel 发表于 Dev

阿里尔

我需要inner_holder的宽度为960px，并且需要将其居中。我尝试使用width：960px和margin：0px自动，但是它不起作用。如何将divs放在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;
}

RienNeVaPlu͢s

如您所见，“包含浮动元素的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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。