如何使用CSS实现图标对齐到文本中间位置

默认行内排列的图标会和文本基线对齐，无法自动落在文本垂直中间位置，可根据现有代码结构选择以下方案实现：

• 方案1：给图标设置vertical-align属性（零结构改动，适配绝大多数常规场景）
  直接给图标元素添加如下样式即可：

  .your-icon-class {
    vertical-align: middle;
    /* 若视觉上仍有1-2px的偏移，可通过小数值margin微调，例如 margin-bottom: 1px; */
  }
  

  注意：该方案要求图标和文本为同级行内/行内块元素，图标未设置浮动、绝对定位等脱离常规流的属性。

• 方案2：父元素设置Flex布局（对齐精度最高，适配图标与文本尺寸差异大的场景）
  给图标和文本的共同父容器添加Flex相关属性，无需单独给图标设置偏移：

  .icon-text-container {
    display: flex;
    align-items: center;
    /* 如需控制图标和文本的间距，直接添加gap属性即可，例如 gap: 6px; */
  }
  

  对应基础HTML结构参考：

  <div class="icon-text-container">
    <img class="your-icon-class" src="图标资源路径" alt="功能图标">
    <span>配套文本内容</span>
  </div>
  

• 方案3：图标作为背景图使用的场景
  如果图标是通过CSS背景图引入，可直接通过背景定位实现垂直居中，不需要额外嵌套标签：

  .text-item {
    /* 左内边距预留图标位置，数值为图标宽度+图标与文本的间距 */
    padding-left: 22px;
    background: url(图标资源路径) no-repeat left center;
    /* 背景属性的center值会自动将图标定位到元素垂直中间位置 */
  }
  

内容的提问来源于stack exchange，提问作者Matheo