Выравнивание Angular ЗНАЧОК и HTML Текст - PullRequest
Новая
       45

Выравнивание Angular ЗНАЧОК и HTML Текст

0 голосов
/ 14 апреля 2020

Вот мой 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>

Вот мой s css код 

 @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;
          }
        }
      }

Я пытается выровнять мою иконку рядом с моим переводом

enter image description here Это то, что у меня сейчас есть

enter image description here Это то, чего я хочу достичь sh

1 Ответ

3 голосов
/ 14 апреля 2020 
<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
}
...