我很難讓我的錨文本和圖標看起來與材料15.1.2居中

我的布局看起來像這樣:

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
    <mat-nav-list>
        <a mat-list-item routerLink="/signup">
          <mat-icon>face</mat-icon>
          <span matLine >Sign up</span>
        </a>

最終結果看起來像:

我認為較新的版本使用flex，而以前它使用block。圖標看起來也是24px，但是包圍框稍微大了一點，是31px。 試圖移動帶填充的文本會迫使整個塊向上移動，我無法向上移動錨文本。

有什么想法嗎？

我用了display:inline-flex；將文本居中，如下面的代碼所示(我使用了bootstrap)。

<a mat-list-item routerLink="" >
    <div class="d-inline-flex">
        <mat-icon>face</mat-icon>
        <span matLine>Sign up</span>
    </div>
</a>

您可以添加一個css類，如

.center-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
}

并在錨元素中使用該類

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation" [opened]="openSidenav">
    <mat-nav-list>
      <a mat-list-item routerLink="/signup" class="center-flex">
        <mat-icon>face</mat-icon>
        <span matLine >Sign up</span>
      </a>