如何解决Material Icons与文字未对齐的问题？

遇到Material图标和文字不对齐的情况太常见了，我给你几个实用的解决方案，你可以根据自己的场景灵活选用：

1. 用vertical-align快速调整对齐 #

这是最直接的修复方式，给图标设置合适的垂直对齐值就能快速拉齐：

.material-icons {
  /* 优先试试middle，视觉上基本能对齐 */
  vertical-align: middle;
  /* 如果middle还是有点偏差，可以用像素微调，比如：vertical-align: -2px; */
}

原理是让图标元素的中线和父元素的中线对齐，刚好匹配文字的视觉中心。

2. 用Flex布局实现完美居中 #

如果图标和文字是在同一个容器里，直接给容器加Flex属性，一步到位实现垂直居中：

.icon-text-wrap {
  display: flex;
  align-items: center;
  /* 可选：给容器设置和文字一致的行高，让整体排版更统一 */
  line-height: 1.6;
}

这种方法适合需要批量处理图标文字组合的场景，不用单独调整每个图标。

3. 精细微调图标位置 #

要是追求像素级的对齐，可以通过调整图标字体大小+相对定位来微调：

.material-icons {
  /* 让图标字体大小和文字匹配，比如文字是16px，图标设为1.2em */
  font-size: 1.2em;
  position: relative;
  /* 根据视觉效果上下调整，比如top: 2px;或者top: -1px; */
  top: 2px;
}

这种方式适合特殊排版需求，比如图标和文字大小差异较大的情况。

4. 用官方推荐的基线对齐法 #

Material Icons官方其实提供了基线对齐的思路，给图标加个自定义类，配合基线对齐属性：

<span class="material-icons icon-baseline">favorite</span>

.material-icons.icon-baseline {
  vertical-align: baseline;
  font-size: inherit;
}

这个方法能让图标和文字的排版基线完全对齐，适合对排版严谨度要求高的场景。

你可以把这些方法挨个试一下，一般前两种就能解决大部分对齐问题啦！

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