elementui文字居中

在Element UI中实现文字居中有多种方法。以下是其中几种常用方法：

1. 使用CSS样式：可以通过设置元素的text-align属性为center来实现文字水平居中，例如：

<style>
.center-text {
  text-align: center;
}
</style>

<template>
  <div class="center-text">
    居中的文字
  </div>
</template>

2. 使用Element UI的组件属性：对于表格等组件，可以通过设置相关的属性来实现文字居中。例如，在el-table组件中，可以使用cell-style属性和header-cell-style属性来设置表格内容和表头的样式，例如：

<el-table :data="tableData" 
          :cell-style="{ 'text-align': 'center' }" // 表格内容居中
          :header-cell-style="{ 'text-align': 'center' }" // 表头居中
          height="220" style="width: 100%"
>
  <el-table-column prop="targetName" label="红榜指标名称"></el-table-column>
  <el-table-column prop="targetValue" label="目标值"></el-table-column>
  <el-table-column prop="totalValue" label="完成值"></el-table-column>
  <el-table-column prop="percent" label="完成率"></el-table-column>
</el-table>

3. 使用Element UI的布局组件：对于一些常见的布局需求，可以使用Element UI的布局组件来实现文字居中。例如，在使用flex布局的容器中，可以设置justify属性为center，align属性为middle来实现文字的水平和垂直居中，例如：

<el-row type="flex" justify="center" align="middle">
  <el-col>
    居中的文字
  </el-col>
</el-row>

以上是一些常用的方法，你可以根据具体的使用场景选择合适的方法来实现文字居中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>