对齐角度图标和 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">&nbsp; &nbsp; &nbsp; <a class="vertical-align" routerLink="/Transfers">&nbsp; &nbsp; &nbsp; &nbsp; <mat-icon>sync_alt</mat-icon>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Transfer&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; </div>并添加到你的CSS.vertical-align {&nbsp; &nbsp; display: flex;&nbsp;&nbsp; &nbsp; align-items: center}