经查询发现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

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐