Material 15.1.2中如何让mat-nav-list内mat-list-item与mat-icon居中对齐

针对你遇到的mat-nav-list内mat-list-item的mat-icon和锚文本无法垂直居中的问题，结合Material 15改用flex布局的特性，提供以下几种解决思路：

思路1：修改flex容器的对齐属性 #

Material 15的mat-list-item内部使用mdc-list-item__content作为flex容器，默认对齐规则可能导致文本偏移。通过自定义CSS强制设置垂直居中：

/* 给mat-list-item添加自定义类名，比如align-center-item */
.align-center-item .mdc-list-item__content {
  align-items: center;
}

模板中给a标签添加该类：

<a mat-list-item routerLink="/signup" class="align-center-item">
  <mat-icon>face</mat-icon>
  <span matLine>Sign up</span>
</a>

思路2：移除matLine的默认上边距 #

matLine指令默认会给span添加margin-top，这是文本偏移的常见原因。直接覆盖该样式：

span[matLine] {
  margin-top: 0 !important;
}

若不想全局覆盖，可结合自定义类：

.align-center-item span[matLine] {
  margin-top: 0;
}

思路3：调整图标的垂直对齐方式 #

如果flex布局调整不生效，可直接给mat-icon设置垂直对齐属性，让它和文本处于同一基线：

.align-center-item mat-icon {
  vertical-align: middle;
}

以上方法均可解决图标与文本的垂直居中问题，优先推荐思路1，它符合flex布局的设计逻辑，不会破坏组件原有结构。

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