element-plus 四图两行布局 需要居中
时间: 2023-07-26 10:06:33 浏览: 145
小程序的居中布局,你可以这样做
你可以使用 flex 布局来实现居中,具体的代码如下:
```html
<template>
<div class="container">
<div class="row">
<el-image src="image1.jpg"></el-image>
<el-image src="image2.jpg"></el-image>
</div>
<div class="row">
<el-image src="image3.jpg"></el-image>
<el-image src="image4.jpg"></el-image>
</div>
</div>
</template>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
display: flex;
justify-content: center;
}
</style>
```
这里通过设置容器的 `display` 属性为 `flex`,并设置其子元素的垂直对齐方式 `align-items` 为 `center`,实现了整个布局的居中。同时,通过设置每行的 `display` 属性为 `flex`,并设置其子元素的水平对齐方式 `justify-content` 为 `center`,实现了每行内部元素的居中。
阅读全文