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>

以上按钮默认居左显示

     

     

     

     

     

     ，使用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会将内的所有组件对其 
     
     
     
     
     
     ，跟

差不多

然后子标签加了个style=“width: max-content   
    
    
    
    
    
  ”

   




   




   




   




   




   



，定义宽度为最大内容


     


     


     


     


     


     
。默认是占一整行的 




 




 




 




 




 




。

做个笔记 



 



 



 



 



 



，也算是踩过的坑   

   

   

   

   

   

 。