html - CSS将项目保持在中心,底部边距
问题描述
我需要创建一个标签部分。容器应该有固定的填充,当标签换行到下一行时,它应该与顶行有间距。
问题是当它换行到下一行时,它不再与中心对齐。如何保持行之间的间距和容器中的固定填充?
.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>
解决方案
添加margin-top: 0.3em
到子 div
.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;
margin-top: 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>
推荐阅读
- antlr4 - Antlr4 解析后记文法
- javascript - 如何在材质 UI AutoComplete 和 onChange 中设置值和选项将值分配给对象?
- c# - 当我尝试在 .NET Core 中反序列化 FormFile 对象时,为什么会出现奇怪的异常?
- spring-boot - 自定义注销处理程序中的身份验证对象为空
- node.js - 我无法读取图像。它显示以下错误
- spring - JBPM 事务超时 - 已完成,多个线程正在进行中
- assembly - 装配中的对齐问题(NASM)
- neo4j - 如何将 MERGE 用于数组属性?
- java - 当我在选项卡布局中更改选项卡时,回收站视图项目正在增加
- python - 在美丽的汤网络刮痧中一无所获