19

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

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

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

CSS包含，

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

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

4

4 回答 4

40

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

通过更改其父项的样式来更改它们的显示方式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 中）或将其注释掉。现在这些是内联元素，这个空白将被解释为一个空格。

于 2012-11-28T10:34:36.830 回答
4 

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

于 2020-10-07T02:17:04.657 回答
2

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

于 2012-11-28T10:33:35.173 回答
0

水平和垂直居中

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

于 2021-05-17T12:52:50.510 回答