el-form label 对齐
时间: 2023-10-09 17:14:38 浏览: 190
el-form 中的 label 对齐可以通过设置 `label-width` 和 `label-position` 属性来实现。 `label-width` 属性用于设置 label 的宽度,可以是一个数字或者是一个字符串,如 `'100px'`。`label-position` 属性用于设置 label 的位置,可以是 `'left'`、`'right'`、`'top'` 或者 `'bottom'`。
例如,以下代码将 label 设置在左侧,且 label 宽度为 80px:
```html
<el-form label-position="left" :label-width="80">
<el-form-item label="用户名">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type="password"></el-input>
</el-form-item>
</el-form>
```
如果想要让 label 居中对齐,可以将 `label-width` 设置为 `auto`,然后在 label 中添加 `text-align: center` 样式,如下:
```html
<el-form :label-width="labelWidth">
<el-form-item label="用户名" class="center-label">
<el-input></el-input>
</el-form-item>
<el-form-item label="密码" class="center-label">
<el-input type="password"></el-input>
</el-form-item>
</el-form>
```
```css
.center-label .el-form-item__label {
text-align: center;
}
```
以上是一些常见的 label 对齐方法,你可以根据自己的实际需求来选择适合自己的方式。
阅读全文