如何在Angular Material的mat-list-item中垂直对齐内容？

核心问题分析 #

你之前修改了mat-list-item的display属性为inline-block，这破坏了Angular Material组件默认的Flex布局结构，导致垂直对齐样式失效。另外vertical-align: center是无效值，正确取值应为middle，但依赖该属性不如利用Flex布局稳定。

有效解决方案 #

方案1：利用组件默认Flex布局调整

恢复mat-list-item的默认布局，通过调整内部<a>标签的样式实现垂直对齐：

模板代码：

<mat-list-item>
  <a href="#">你的内容</a>
</mat-list-item>

CSS样式：

/* 移除display: inline-block，保留组件默认Flex布局 */
mat-list-item {
  height: auto;
  width: auto;
  /* mat-list-item默认已设置display: flex和align-items: center，无需重复定义 */
}

a {
  display: flex;
  align-items: center;
  height: 100%; /* 让a标签占满列表项高度，确保垂直居中生效 */
  width: 100%; /* 可选：让a标签铺满列表项宽度，提升点击区域 */
}

方案2：解决样式优先级问题（如果方案1无效）

若Angular Material的默认样式覆盖了自定义样式，可使用::ng-deep提升优先级：

::ng-deep mat-list-item {
  align-items: center; /* 强制设置列表项的垂直对齐方式 */
}

::ng-deep mat-list-item a {
  display: flex;
  align-items: center;
  height: 100%;
  width: 100%;
}

原理说明 #

Angular Material的mat-list-item组件默认采用Flex布局，自带align-items: center实现内部元素垂直居中。修改其display属性为inline-block会打破这个布局逻辑，导致后续样式失效。通过恢复默认布局并让<a>标签占满列表项高度，就能确保内容稳定垂直对齐。

内容的提问来源于stack exchange，提问作者Nikolina Stojčić