Angular material align menu tabs in the center
You can add mat-align-tabs="center" to the nav to make it center... See below...
<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>
You could use the CSS property flex
.
Add this class e.g. in your styles.css or in the CSS file of your component:
.toolbar-flex {
flex: 1 0.5 auto;
}
Your HTML would then look like:
<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>