我需要创建一个标签部分。容器应该有固定的填充,当标签换行到下一行时,它应该与顶行有间距。
问题是当它换行到下一行时,它不再居中对齐。如何保持容器中行与固定填充之间的间距?
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.wrap {
flex-wrap: wrap;
}
section {
border: 1px solid grey;
min-height: 40px;
width: 400px;
padding: 0 0.5em;
}
.item {
background-color: hotpink;
padding: 0.3em;
margin-right: 0.4em;
margin-bottom: 0.3em;
}
* {
box-sizing: border-box;
}
<section class="flex align-center wrap">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</section>
最佳答案
您需要为 .flex
container 定义相同的 top & bottom padding
,这将保持.item
始终垂直居中,然后只需调整 child 的 margin
即可实现 它们之间的间距相等:
* {box-sizing: border-box}
.flex {
display: flex;
align-items: center;
flex-wrap: wrap;
border: 1px solid grey;
min-height: 40px;
width: 400px;
padding: .5em .2em;
animation: width 4s linear infinite alternate;
}
.item {
background-color: hotpink;
padding: .3em;
margin: .2em;
}
@keyframes width {to {width: 100px}}
<section class="flex">
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</section>
关于html - CSS 将元素保持在底部的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50713521/