如何让el-button 在 el-form中水平居中
时间: 2024-01-09 09:41:40 浏览: 128
可以尝试以下方法让 `el-button` 在 `el-form` 中水平居中:
1. 在 `el-form` 外部包裹一个 `div` 容器,并设置 `display: flex; justify-content: center;` 属性,使得 `el-form` 水平居中。
2. 在 `el-form` 中添加一个 `el-row`,并将 `el-button` 放置在其中的一个 `el-col` 中,同时设置 `text-align: center;` 属性,使得 `el-button` 水平居中。
示例代码:
```html
<!-- 方法一 -->
<div style="display: flex; justify-content: center;">
<el-form>
<el-button>按钮</el-button>
</el-form>
</div>
<!-- 方法二 -->
<el-form>
<el-row>
<el-col :span="24" style="text-align: center;">
<el-button>按钮</el-button>
</el-col>
</el-row>
</el-form>
```
相关问题
如何让el-button在el-form中居中
可以使用 flex 布局来实现 el-button 在 el-form 中的居中。
首先,在 el-form 上添加 `display: flex; justify-content: center; align-items: center;` 样式,使其成为一个 flex 容器,并将其子元素(包括 el-button)在水平和垂直方向上都居中。
示例代码如下:
```
<template>
<el-form style="display: flex; justify-content: center; align-items: center;">
<el-button>居中按钮</el-button>
</el-form>
</template>
```
这样,el-button 就能够在 el-form 中水平和垂直方向上居中了。
el-form-item里el-input和el-button一行
您可以使用 Flex 布局来实现 `el-form-item` 中的 `el-input` 和 `el-button` 在同一行显示。下面是一个示例代码:
```html
<template>
<el-form>
<el-form-item>
<el-input></el-input>
<el-button>按钮</el-button>
</el-form-item>
</el-form>
</template>
<style>
.el-form-item {
display: flex;
align-items: center;
}
</style>
```
在上面的代码中,我们将 `el-form-item` 的样式设置为 `display: flex;`,这样它的子元素就会水平排列。然后,使用 `align-items: center;` 来使子元素在垂直方向上居中对齐。这样,`el-input` 和 `el-button` 就会在同一行显示了。