对齐角度图标和 HTML 文本

Question

这是我的 HTML 代码<div class="transfer-link" *ngIf="showTransferLink" qa-name="transfer-link">      <a routerLink="/Transfers">        <mat-icon>sync_alt</mat-icon>        <div>          Transfer        </div>      </a>    </div>  </div>这是我的scss代码 @media (min-width: 320px) and (max-width: 768px) {        margin-top: 0.5rem;        padding-top: 0.5rem;        border-top: 1px solid $color-gray-light;        flex-direction: row;        div[role='button'] {          flex-direction: row;          .mat-icon {            margin-right: 0.5rem;            font-size: 1.5rem;            height: 1.5rem;            width: 1.5rem;          }        }      }我正在尝试将我的图标与我的转接旁边对齐这就是我目前拥有的这就是我想要实现的目标

Answer 1

<div class="transfer-link vertical-align" *ngIf="showTransferLink" qa-name="transfer-link">

      <a class="vertical-align" routerLink="/Transfers">

        <mat-icon>sync_alt</mat-icon>

        <div>

          Transfer

        </div>

      </a>

    </div>

  </div>

并添加到你的CSS

.vertical-align {

    display: flex; 

    align-items: center

}