应用系统定制开发element plus组件居中显示

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”,定义宽度为最大内容。默认是占一整行的。
做个笔记,也算是踩过的坑。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发