如何修复Material Icons图标与相邻文本的位置偏移问题

问题表现 #

图标和相邻文本存在垂直方向错位，初始错位效果如下：

当前未添加任何position定位相关自定义CSS，基础HTML结构如下：

<i class="material-icons md-18 inline">mail</i>
<h6 class="inline">info@ex.com</h6>

引用的Material Icons样式为官方发布的标准字体资源。

之前尝试通过margin属性调整偏移时，会带动整个父容器偏移，无法单独调整图标位置实现对齐，错误调整的夸张效果如下：

修复方法 #

方案1：快速修复（保留现有inline布局） #

错位核心原因是行内元素默认的vertical-align: baseline基线对齐规则，和图标字体的内置行高、基线设置不匹配，不需要修改position或者调整父容器margin，直接给图标元素设置垂直对齐属性即可：

.material-icons {
  /* 核心对齐属性 */
  vertical-align: middle;
  /* 如果对齐后还有1-2px的细微视觉偏差，用transform微调，不会影响其他元素布局 */
  /* transform: translateY(1px); */
}

之前用margin调整失效的原因：行内非替换元素的上下margin本身不会触发布局偏移，要是误把margin加在父容器上，自然会带动整个容器移位。

方案2：稳妥布局（推荐，适配多字号场景） #

不要强行给两个元素加inline属性挤在一行，用flex布局做对齐，完全不受字体基线、行高差异影响，容错率更高：

1. 首先给图标和文本加一层父容器，移除两个元素上多余的inline类：

<div class="align-wrap">
  <i class="material-icons md-18">mail</i>
  <h6>info@ex.com</h6>
</div>

2. 添加对应布局样式：

.align-wrap {
  display: flex;
  /* 垂直居中对齐 */
  align-items: center;
  /* 自定义图标和文本的间距 */
  gap: 6px;
}
/* 清除h6默认的上下外边距，避免撑高容器 */
.align-wrap h6 {
  margin: 0;
}

如果用18px尺寸的图标，配套文本字号尽量和图标字号差值控制在2px以内，视觉对齐效果会更自然，有细微偏差时同样可以给图标加transform: translateY()做像素级微调。

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