角度材质 mat-align-tabs 属性未正确对齐

Question

正如角度材料选项卡文档中提到的，我的项目中有这个标记：

<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>

我的CSS类如下：

.mat-tab-group {
    margin-bottom: 48px;
  }

但作为输出，我将所有上述选项卡组放置在与下面相同的位置。我希望选项卡组集中。

我的 Angular 版本是 6。有什么帮助吗？

Answer 1

mat-header据我所知，通过材质 API调整水平位置是不可能的。

但是，您可以使用ng-deep（是的，已弃用，但仍然有效），并且由于它是一个弹性项目，您可以简单地将其对齐到中心。

::ng-deep mat-tab-header {
  align-self: center;
}

堆栈闪电战演示