el-form-item居中
时间: 2023-09-10 14:10:25 浏览: 244
Vue中el-form标签中的自定义el-select下拉框标签功能
要使 el-form-item 居中,你可以使用 flex 布局或者 text-align 属性来实现。
使用 flex 布局:
```html
<el-form :model="form" label-width="80px">
<el-row justify="center">
<el-col :span="12">
<el-form-item label="字段名">
<el-input v-model="form.field" placeholder="输入内容"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
在上述代码中,我们使用了 `<el-row>` 和 `<el-col>` 这两个布局组件,并将 `justify` 属性设置为 "center",以实现水平居中对齐。
使用 text-align 属性:
```html
<el-form :model="form" label-width="80px">
<el-form-item label="字段名" style="text-align: center;">
<el-input v-model="form.field" placeholder="输入内容"></el-input>
</el-form-item>
</el-form>
```
在上述代码中,我们直接在 el-form-item 标签上使用 style 属性,并将 text-align 设置为 "center",以实现居中对齐。
这两种方法都可以使 el-form-item 内容居中,你可以根据具体情况选择其中一种方式来实现。
阅读全文