Angular Material如何让菜单选项卡居中对齐

Question

我该如何将mat菜单选项卡居中对齐？

例如：

<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>

- Cap Barracudas

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>

- Ron

---

这是根据Angular Material API最新的答案：https://material.angular.io/components/tabs/overview#label-alignment - Doug Wilhelm

Answer 2

您可以使用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>

- pzaenger

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">中，那应该就可以了。

- mohsenmadi