如何让el-button 在 el-dialog中水平居中
时间: 2023-10-14 11:17:10 浏览: 278
element中el-container容器与div布局区分详解
可以通过设置 `.el-dialog__footer` 的样式来让 `el-button` 在 `el-dialog` 中水平居中。
首先,在 `el-dialog` 中添加一个 `footer` 插槽,然后在插槽中添加 `el-button`。
```html
<el-dialog>
<template #footer>
<el-button>按钮</el-button>
</template>
</el-dialog>
```
然后,在 `style` 中设置 `.el-dialog__footer` 的样式,将其内部子元素水平居中即可:
```css
.el-dialog__footer {
text-align: center;
}
.el-dialog__footer button {
margin: 0 auto;
display: inline-block;
}
```
这样,`el-button` 就会水平居中在 `el-dialog` 的底部。
阅读全文