element icon图标和文字不对齐

Element UI 的图标元素（icon）默认情况下可能会和其包含的文字标签对齐问题，这主要是因为Icon组件通常是行内元素，而文本通常是块级元素，它们的布局规则略有区别。若遇到图标和文字不在同一行或对齐不佳的情况，你可以尝试以下几种解决方法：

1. 使用`<el-icon>`和`<span>`组合，并设置`display: inline-block`或`vertical-align: middle`给`<span>`，这样可以让图标和文字在同一行水平对齐。

<el-icon><span>你的图标<span></el-icon>

CSS样式：

.el-icon span {
  display: inline-block;
  vertical-align: middle;
}

2. 如果你想保持图标作为图标组件的一部分，可以考虑调整容器的样式，如设置`line-height`，使其适应图标高度。

<el-row :gutter="8">
  <el-col :span="4">
    <el-icon>你的图标</el-icon>
    <p>你的文字描述</p>
  </el-col>
</el-row>

并相应地调整`.el-row`的`line-height`值。

3. 对于需要固定间距的情况，可以考虑在图标前后添加空格或使用`&nbsp;`替换。

<el-icon>&nbsp;你的图标</el-icon>