<div class="box box3 item">Box 3 <img src="img/box3.jpg" alt=""><br> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""> <div class="label">编辑器</div> <img src="img/box3.jpg" alt=""><div class="label">编辑器</div></div> 用flex布局使图片占一行,文字占一行,且文字在图片的正下方
时间: 2023-07-03 16:04:26 浏览: 50
可以使用以下CSS代码实现:
```css
.box {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box img {
flex: 1 1 100%;
max-width: 100%;
height: auto;
}
.box .label {
flex: 1 1 100%;
text-align: center;
}
```
HTML代码如下:
```html
<div class="box box3 item">
<img src="img/box3.jpg" alt="">
<div class="label">编辑器</div>
<img src="img/box3.jpg" alt="">
<div class="label">编辑器</div>
<img src="img/box3.jpg" alt="">
<div class="label">编辑器</div>
<img src="img/box3.jpg" alt="">
<div class="label">编辑器</div>
<img src="img/box3.jpg" alt="">
<div class="label">编辑器</div>
</div>
```
在这个例子中,我们使用了flex布局,并设置`align-items`和`justify-content`属性,让图片和文本都垂直居中和水平居中。图片和文本都具有`flex: 1 1 100%`属性,这意味着它们都具有相同的flex-grow、flex-shrink和flex-basis值,文本将在其下方对齐图片,因为它们具有相同的高度。