el-icon图标在span未上下居中

可以通过设置span的display属性为flex，并使用align-items和justify-content属性来实现el-icon图标在span中垂直和水平居中。

例如：

<span style="display: flex; align-items: center; justify-content: center;">
  <i class="el-icon-search"></i>
</span>

这将使el-icon图标在span中垂直和水平居中。您可以根据需要更改样式属性。

相关问题

<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上

你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性，同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性，代码如下：

<el-row justify="center">
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
  <el-col :span="5" align="center">
    <el-card style="color:#409EFF">
      <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
      <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
    </el-card>
  </el-col>
</el-row>

这样设置后，每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内，同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。

<div class='css-btn-box'> <span style="">可用应用列表</span> <el-button type='primary' plain icon='el-icon-plus' size='mini' @click='appSelect' :disabled='this.currentId==null ? true:false'> 加入 </el-button> </div>设置可用应用列表和加入按钮在同一行

您可以使用CSS中的Flexbox布局来实现这种布局。将包含可用应用列表和加入按钮的div元素设置为flex容器，并将其flex-direction属性设置为row。这样可用应用列表和加入按钮就会在同一行上了。

示例代码如下：

HTML:

<div class="css-btn-box">
  <span style="">可用应用列表</span>
  <el-button type='primary' plain icon='el-icon-plus' size='mini' @click='appSelect' :disabled='this.currentId==null ? true:false'>
    加入
  </el-button>
</div>

CSS:

.css-btn-box {
  display: flex;
  flex-direction: row;
  align-items: center; /* 可让两个元素垂直居中 */
}