角度材料在中心对齐菜单选项卡

Question

如何在中心对齐垫子菜单选项卡？

铁

<mat-toolbar>
    <nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
        <a mat-tab-link routerLink="/lala">lala</a>
        <a mat-tab-link routerLink="/lala2">lala2</a>
        <a mat-tab-link routerLink="/lala3">lala3</a>
      </nav>
</mat-toolbar>

Answer 1

您可以将mat-align-tabs="center" 添加到导航以使其居中...见下文...

<mat-toolbar>
 <nav mat-tab-nav-bar mat-align-tabs="center" aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
    <a mat-tab-link routerLink="/lala">lala</a>
    <a mat-tab-link routerLink="/lala2">lala2</a>
    <a mat-tab-link routerLink="/lala3">lala3</a>
 </nav>
</mat-toolbar>

Answer 2

您可以使用 CSS 属性flex。

在你的style.css或组件的 CSS 文件中添加这个类：

.toolbar-flex {
  flex: 1 0.5 auto;
}

您的 HTML 将如下所示：

<mat-toolbar>
    <span class="toolbar-flex"></span>
    <nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
        <a mat-tab-link routerLink="/lala">lala</a>
        <a mat-tab-link routerLink="/lala2">lala2</a>
        <a mat-tab-link routerLink="/lala3">lala3</a>
    </nav>
    <span class="toolbar-flex"></span>
</mat-toolbar>