中心对齐多个孩子DIV

Question

我发现解决这个问题有点令人困惑.

我有父DIV和3个/更多Child DIV.

父DIV是居中对齐的,子DIV应该向左浮动,但应该对齐居中.

CSS包含,

.center {
   float:left;
   height:250px;
   width:15%;
   margin: 0 auto;
   border: 1px solid black;
}

我在这里有一个代码链接示例...

Answer 1

如果要集中水平对齐元素,则不要浮动它们.

inline-block通过更改text-align父级的样式,更改它们的显示方式并将它们对齐到中心:

#parent {
    text-align:center;
    height:450px;
    width:75%;
    border:1px solid blue;
}
.center {
    display:inline-block;
    height:250px;
    width:15%;
    margin: 0 auto;
    border: 1px solid black;
}

<div id="parent">
    <div id="child1" class="center"></div><!--
 --><div id="child2" class="center"></div><!--
 --><div id="child3" class="center"></div>
</div>

请确保您的孩子之间没有空格或换行符<div>(在您的HTML中),或者将其注释掉.现在这些是内联元素,这个空白区域将被解释为空格.

Answer 2

#parent{
    display: flex;
    justify-content:center;
    flex-direction:row; /*default value is row*/
    height:350px;
    width:75%;
    border:1px solid blue;
    padding: 10px 0;/* not mandatory */
}
.center {
    height:250px;
    width:15%;
    margin:5px;
    border: 1px solid black;
}

<div id="parent">
<div id="child1" class="center">
</div>
    <div id="child2" class="center">
</div>
    <div id="child3" class="center">
</div>
</div>

Flex 帮助我们轻松实现某些目标。