角度材料mat-tab-nav-bar在左侧制作徽标，标签居中

Question

我有一个导航栏，但我希望中间的标签左侧带有徽标

<nav mat-tab-nav-bar>
  <a mat-tab-link
     [routerLink]="'/'">
    <img src="/assets/logo.jpg">
  </a>
  <a mat-tab-link
     [routerLink]="'/find-property'"
     routerLinkActive #rla1="routerLinkActive"
     [active]="rla1.isActive">
    Find Property
  </a>
  <a mat-tab-link
     [routerLink]="'/manage-property'"
     routerLinkActive #rla2="routerLinkActive"
     [active]="rla2.isActive">
    List a Property
  </a>
</nav>

Answer 1

添加自动边距并确保位置是绝对的，如果您希望选项卡位于正中间。

nav {
  .logo {
    img {
      height: 1.5em;
    }
    @media only screen and (min-width: 800px) {
      position: absolute;
    }
  }
  /deep/ .mat-tab-links {
    display: flex;
    justify-content: flex-start;
  }
}

和带有自动边距的html：

<nav mat-tab-nav-bar>
  <a mat-tab-link
     class="logo"
     [routerLink]="'/'">
    <img src="/assets/logo.jpg">
  </a>
  <a mat-tab-link
     style="margin-left: auto"
     [routerLink]="'/find-property'"
     routerLinkActive #rla1="routerLinkActive"
     [active]="rla1.isActive">
    Find Property
  </a>
  <a mat-tab-link
     style="margin-right: auto"
     [routerLink]="'/manage-property'"
     routerLinkActive #rla2="routerLinkActive"
     [active]="rla2.isActive">
    List a Property
  </a>
</nav>