居中对齐多个子 DIV答案

【问题标题】：Center align multiple child DIV居中对齐多个子 DIV
【发布时间】：2012-11-16 04:18:49
【问题描述】：

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

我有父 DIV 和 3 个/更多子 DIV。

父 DIV 居中对齐，子 DIV 应向左浮动但应居中对齐。

CSS 包含，

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

I have a sample of the code link here...

【问题讨论】：

标签： css css-float

【解决方案1】：

水平和垂直居中

使用top 垂直居中，calc 动态计算top 值。顶部将与 position - relative 一起使用。

在父级中使用text-align:center，在子级中使用display:inline-block 作为水平居中。

.parent {
height:400px;
width:400px;
position:absolute;
border:1px solid black;
text-align:center;
}
.child {
position:relative;
height:70px;
width:70px;
border:1px solid red;
top:calc(50% - 70px/2);
display:inline-block;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>

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



</body>
</html>

【讨论】：

【解决方案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 帮助我们轻松实现某些目标。

【讨论】：

【解决方案3】：

如果您想水平居中对齐元素，请不要浮动它们。

将它们的显示方式更改为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>s 之间没有空格或换行符（即在您的 HTML 中）或将其注释掉。现在这些是 inline 元素，这个空白将被解释为一个空格。

【讨论】：

+1 用于指出导致 PITA 的空白。哈哈，可能救了 OP 问另一个问题。
我还冒昧地编辑了 A 字并进行了一些格式化。希望你没事。

【解决方案4】：

自动边距不适用于应用了浮动的元素。删除浮动应该让你开始......

【讨论】：