Menu
How can I align the mat menu tabs in the center?
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>
703
Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab's label is shown in the tab header and the active tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left ...
This guide focuses on aligning items in every conceivable way in Material-UI: aligning right, left, and horizontally centered; aligning top, bottom, and vertically centered. In this example I will use the Material-UI Grid, but the alignment principles apply for aligning all MUI components.
If you want to align the tab labels in the center or towards the end of the container, you can do so using the [mat-align-tabs] attribute. You can control the duration of the tabs' animation using the animationDuration input.
Material-UI Align Left Let’s start by left aligning the first column with inline styling. The Grid Item in the top row will be vertically aligned top, the center row will be vertically aligned center, and the bottom row will be vertically aligned bottom. Ignore the className, it simply styles the borders on each item.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
