element 四图两行布局 需要居中
时间: 2023-08-15 13:08:37 浏览: 52
可以使用 flex 布局实现,将父元素设置为 flex 容器,然后通过设置 justify-content 和 align-items 属性来实现居中对齐。
HTML 代码:
```html
<div class="container">
<div class="box">
<img src="image1.jpg" alt="">
</div>
<div class="box">
<img src="image2.jpg" alt="">
</div>
<div class="box">
<img src="image3.jpg" alt="">
</div>
<div class="box">
<img src="image4.jpg" alt="">
</div>
</div>
```
CSS 代码:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.box {
width: 200px;
height: 200px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}
```
在这个例子中,我们将容器设置为 flex 容器,并将其内容居中对齐。我们还将子元素设置为 flex 容器,并将其内容居中对齐。最后,我们使用 flex-wrap 属性来让子元素换行。这样我们就可以在两行中居中显示四个图像。