Question

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

我有父DIV和3个/更多Child 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...

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

自动边距不适用于已应用浮点数的元素。移除浮动应该让你开始......

Answer 3

#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可以帮助我们轻松实现某些目标。

Answer 4

将此属性添加到div类CSS的底部，确保子代不会超过div高度

min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;

Answer 5

水平和垂直居中

使用 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>

中心对齐多个孩子DIV

5 个答案:

水平和垂直居中