Question

如何在中心对齐垫菜单标签？

f.e。

<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">内，那就应该这样做。

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

3 个答案: