位置: IT常识 - 正文
element plus组件居中显示(elementui常用组件)
编辑：rootadminelement plus组件居中显示 element plus组件内容居中显示
本文链接地址:https://www.jiuchutong.com/zhishi/278184.html
转载请保留说明！
推荐整理分享element plus组件居中显示(elementui常用组件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:element组件 table,element组件居中,element组件官网,element组件扩展,element组件 table,element组件居中,element组件扩展,element组件居中,内容如对您有帮助，希望把文章链接给更多的朋友！
今天用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>以上按钮默认居左显示，使用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>然而并没有居中，然后经过半天琢磨改成以下代码：
<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>成功居中显示了！ text-align:center改成了text-align: -webkit-center -webkit-center会将内的所有组件对其，跟<center>差不多 然后子标签加了个style=“width: max-content”，定义宽度为最大内容。默认是占一整行的。 做个笔记，也算是踩过的坑。
上一篇：Win11 Dev预览版出现奇怪 Bug：电量能充到 100% 以上(windows 11预览版)
下一篇：电脑cpu性能天梯图2022最新高清大图(电脑CPU性能天梯)