对齐角度图标和 HTML 文本

这是我的 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;

          }

        }

      }

我正在尝试将我的图标与我的转接旁边对齐

https://img1.sycdn.imooc.com/65814af90001679100660043.jpg这就是我目前拥有的

https://img1.sycdn.imooc.com/65814b04000124a400640024.jpg这就是我想要实现的目标


守着一只汪
浏览 89回答 1
1回答

慕无忌1623718

<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}
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5