html - 当它具有 float 样式时如何使它的父元素居中

Question

<div class="parent"> 
    <div style="float:left"></div>
</div>

当子 div 有一个 float 样式时，我怎样才能让它在它的父元素中居中？

抱歉，我的英语太差，无法准确描述我的问题。

我用下面的图片来描述希望你能看懂

Answer 1

您可以使用 display:table/table-cell 如果元素是或不是 float ，这将起作用。

html{
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html,body{
    margin:0;
    width:100%;
}

.parent{
    width:100%;
    display:table;
}

.parent>div{
    display:table-cell;
    border:1px solid black;
    width: calc(100% /5);
    float:left;
    text-align: center;
}

<div class="parent"> 
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
    <div>foo</div>
</div>

JSFiddle