css换行了怎么居中
可以使用flex布局来实现CSS换行的居中。具体步骤如下:
- 在父元素上添加
display: flex;来开启flex布局。 - 设置
flex-wrap: wrap;来允许子元素换行。 - 添加
justify-content: center;来水平居中子元素。 - 添加
align-items: center;来垂直居中子元素。
以下是一个示例代码:
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
在上述示例中,父元素.container使用了flex布局,并设置了居中对齐方式。子元素.box设置了固定的宽高和边距。通过这样的设置,子元素会在换行时居中对齐
原文地址: https://www.cveoy.top/t/topic/hVxG 著作权归作者所有。请勿转载和采集!