element plus组件居中显示

element plus 组件 内容 居中显示

今天用Element UI做一个分页，发现所有组件都无法实现居中显示，百度了大部分都是text–align:center，但我试了都不管用，自己研究了半天终于找到了解决办法。

  &lt;el-form ref="ruleForm" label-width="100px"&gt;
    &lt;el-form-item label-width="0"&gt;
      &lt;el-button&gt;确认</el-button&gt;
    </el-form-item&gt;
  </el-form&gt;

以上按钮默认居左显示，使用 div括起来，然后使用 text–align:center：

<div style="text-align:center"&gt;
  <el-form ref="ruleForm" label-width="100px"&gt;
    <el-form-item label-width="0"&gt;
      <el-button&gt;确认</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”，定义宽度为最大内容。默认是占一整行的。
做个笔记，也算是踩过的坑。