绿色父级宽度将根据设备宽度而变化。我需要所有的盒子都在 parent 的中心。
我已经尝试过以下方法,但对我没有帮助。
试验 1
父{text-align:center} 框{display:inline-block}
。
试验 2
父{text-align:center} 框{float:left}
。
这导致了以下输出
试验 3
Parent {display:flex} box -> justify-around & justify-between
也没有用。
.parent {
text-align: center;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
我们将不胜感激。
最佳答案
如果没有 Javascript,这很难使用 float 和/或内联 block 。
Flexbox 提供了一些希望,但即便如此,也需要一些创造力。
本质上,如果已知“每行”的最大元素数,您可以创建所需数量的不可见元素,这些元素可以与 justify-content:center
结合使用以实现最后一行通过将最后一行内容推回左侧来实现您所需的外观。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.parent {
text-align: center;
border: 1px solid grey;
width: 80%;
max-width: 800px;
margin: 1em auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background: red;
}
.balancer {
height: 0;
width: 100px;
margin: 0 10px;
visibility: hidden;
}
<div class="parent">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="balancer"></div>
<div class="balancer"></div>
<div class="balancer"></div>
<div class="balancer"></div>
</div>
关于html - 对齐留在父级的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34447136/