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

发布时间：2020-12-14 22:30:28 所属栏目：资源来源：网络整理

导读：我需要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_c

我需要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;
}

解决方法

正如你所能看到的那样,“包含浮动元素的div”实际上位于中心(红色).

我假设您想要将浮动元素本身居中,而不是它们的父级.我担心你不能这样做(据我所知).但是,如果您不依赖于实际浮动的元素,您可能只想将.colum显示为内联块,并将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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!