Q:

Angular material mat-align-tabs properties are not getting properly aligned

As mentioned in the angular material tabs documentation, I have this markup in my project:
<mat-tab-group mat-align-tabs="start">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

    <mat-tab-group mat-align-tabs="center">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

    <mat-tab-group mat-align-tabs="end">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

My css class is as below:
.mat-tab-group {
    margin-bottom: 48px;
  }

But as the output I am getting all the above tab groups placed in same position as below. I want the tab group to get centralised.

My Angular version is 6. Any help?

A:

adjusting mat-header horizontal position via material api is not possible as far as I know.
you can however, use ng-deep (yes deprecated but still works) and since its a flex item, you can simply align it to the center.
::ng-deep mat-tab-header {
  align-self: center;
}

stackblitz demo

