经查询发现el-row,el-col可以实现居中,但是引入后发现还是不行,代码如下:

<el-form>
  <el-form-item >
       <el-row  justify="center" >
              <el-col :span="24">
                <el-button >登 录</el-button>
              </el-col>
        </el-row> 
  </el-form-item>
</el-form>

后来发现把el-row及下面的元素移出el-form-item就可以实现水平居中,但我想el-form-item中的元素居中,经测试有两种方法可行,一个是在里面button外包一个有宽度的div,还有就是给button设置margin: 0 auto,例子:

<el-form-item >
            <div style="width: 100%; text-align: center;">
              <el-button>按钮1</el-button>
            </div>
            <el-button style="margin:0 auto;">按钮2</el-button>
</el-form-item>
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐