vue el-col组件里面的组件在垂直居中
时间: 2023-08-18 07:19:13 浏览: 170
vue实现长图垂直居上 vue实现短图垂直居中
要让`el-col`组件里面的子组件垂直居中,可以使用flex布局,具体方法如下:
```html
<el-col :span="12" class="align-center">
<!-- 这里放置你要垂直居中的内容 -->
</el-col>
```
然后在CSS中定义`.align-center`样式,如下:
```css
.align-center {
display: flex;
justify-content: center;
align-items: center;
}
```
这里我们使用了flex布局,`justify-content`属性的值为`center`表示让子组件水平居中,`align-items`属性的值也为`center`表示让子组件垂直居中。这样就可以让`el-col`组件里面的子组件垂直居中了。
阅读全文