element plus应用系统定制开发组件内容居中显示
今天用Element UI应用系统定制开发做一个分页,发现所有组件都无法实现居中显示,百度了大部分都是text-align:center,但我试了都不管用,自己研究了半天终于找到了解决办法。
<el-form ref="ruleForm" label-width="100px"> <el-form-item label-width="0"> <el-button>确认</el-button> </el-form-item> </el-form>
- 1
- 2
- 3
- 4
- 5
以上按钮默认居左显示,使用div括起来,然后使用text-align:center:
<div style="text-align:center"> <el-form ref="ruleForm" label-width="100px"> <el-form-item label-width="0"> <el-button>确认</el-button> </el-form-item> </el-form></div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
然而并没有居中,然后经过半天琢磨改成以下代码:
<div style="text-align: -webkit-center"> <el-form ref="ruleForm" label-width="100px" style="width: max-content"> <el-form-item label-width="0"> <el-button>确认</el-button> </el-form-item> </el-form> </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
成功居中显示了!
text-align:center改成了text-align: -webkit-center
-webkit-center会将内的所有组件对其,跟<center>
差不多
然后子标签加了个style=“width: max-content”,定义宽度为最大内容。默认是占一整行的。
做个笔记,也算是踩过的坑。