el-dialog的title居中显示
时间: 2023-10-04 22:05:53 浏览: 88
可以通过在 `el-dialog` 上设置 `custom-class` 属性,并通过该属性指定一个自定义的 CSS 类名,在这个 CSS 类中设置 `text-align: center` 即可实现 `el-dialog` 的 `title` 居中显示。具体代码如下:
```html
<el-dialog title="对话框" :visible.sync="dialogVisible" custom-class="my-dialog">
<!-- 对话框内容 -->
</el-dialog>
```
```css
.my-dialog .el-dialog__header {
text-align: center;
}
```
相关问题
el-dialog title居中显示 vue怎么实现
可以通过在 `el-dialog` 标签上添加 `custom-class` 属性来自定义对话框的样式类,然后在 CSS 中设置标题居中显示的样式。
示例代码如下:
```html
<el-dialog title="对话框标题" :visible.sync="dialogVisible" custom-class="my-dialog">
<!-- 对话框内容 -->
</el-dialog>
```
```css
.my-dialog .el-dialog__title {
text-align: center;
}
```
其中,`.my-dialog` 是自定义样式类名,`.el-dialog__title` 是对话框标题的默认样式类。通过将这两个样式类结合起来,就可以实现标题居中显示了。
el-dialog title居中
要将 el-dialog 的标题居中,可以使用 CSS 来实现。你可以通过以下方式来实现:
1. 在 el-dialog 标签上添加一个 class 名称,比如 "center-title":
```html
<el-dialog :title="dialogTitle" class="center-title">
<!-- 对话框内容 -->
</el-dialog>
```
2. 在你的 CSS 文件或 style 标签中添加以下代码:
```css
.center-title .el-dialog__header {
text-align: center;
}
```
这样,el-dialog 的标题就会居中显示了。注意,确保上述 CSS 代码能够被正确加载并应用到 el-dialog 组件上。