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

Question

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

FE

<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

您可以使用CSS属性flex 。

添加此类，例如在styles.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>

Answer 2

您可以将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 3

我现在有这样的代码运行：

<mat-toolbar>
  <div fxFlex fxLayout fxLayoutAlign="flex-start">
    <ul fxLayout fxLayoutGap="10px">
      <li><a routerLink="/signup">signup</a></li>
      <li><a routerLink="/login">login</a></li>
    </ul>
  </div>
</mat-toolbar>

现在，我只尝试将center作为fxLayoutAligh的值并且它起作用（剩下的值是flex-end ）。 所以对你来说，如果你可以删除span元素并将整个mat-toolbar体包裹在<div fxFlex fxLayout fxLayoutAlign="center"> ，那就应该这样做。