问题导航栏中心fxFlex fxLayout fxLayoutAlign

Question

我正在设置导航栏。我写了代码，但导航栏始终在左侧，我不明白为什么它没有移到中心。

[enter image description here][1]

这是我的导航栏代码

<div class="navtabs-container">
    <nav mat-tab-nav-bar mat-tab-nav-bar fxFlex fxLayout fxLayoutAlign="center center">
        
        <a mat-tab-link routerLink="/"
        routerLinkActive #home="routerLinkActive"
        [active]="home.isActive">
        Home
    </a>
    <a mat-tab-link routerLink="/accomodation"
        routerLinkActive #accomodation="routerLinkActive"
        [active]="accomodation.isActive">
        Accomodation
    </a>
    <a mat-tab-link routerLink="/rentboat"
        routerLinkActive #rentboat="routerLinkActive"
        [active]="rentboat.isActive">
        Rent Boat
    </a>
    <a mat-tab-link routerLink="/daytripstours"
        routerLinkActive #daytripstours="routerLinkActive"
        [active]="daytripstours.isActive">
        Activities
    </a>
    <a mat-tab-link routerLink="/foodandbeverage"
        routerLinkActive #foodandbeverage="routerLinkActive"
        [active]="foodandbeverage.isActive">
        Food &amp; Beverage
     </a>

     <a mat-tab-link routerLink="/offers"
     routerLinkActive #offers="routerLinkActive"
     [active]="offers.isActive">
     Offers
 </a>
    
    </nav>

</div>

Answer 1

@import '~@angular/material/theming';

@mixin navtabs-component-theme($caprieasy) {

    $primary: map-get($caprieasy, primary);
    $accent: map-get($caprieasy, accent);

    .navtabs-container {
        background-color: mat-color($caprieasy-primary) 900;
    }
}

.toolbar-flex {
    flex: 1 0.5 auto;
    }

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NavtabsComponent } from './navtabs.component';

describe('NavtabsComponent', () => {
  let component: NavtabsComponent;
  let fixture: ComponentFixture<NavtabsComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ NavtabsComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NavtabsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navtabs',
  templateUrl: './navtabs.component.html',
  styleUrls: ['./navtabs.component.css']
})
export class NavtabsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Answer 2

i fix

        <nav mat-tab-nav-bar fxFlex fxLayout mat-align-tabs="center">