对齐 Angular 图标和 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
}

对齐 Angular 图标和 HTML 文本

Aligning Angular ICON and HTML Text

html

angular

typescript

scss-lint