Angular “居中对齐md”选项卡“组标题标签”

我想将标签栏居中显示标签，以便在左侧添加一个连接到标签的侧栏。以下是我的代码：

 <div class="flex-container">

  <div class="flex-item1">
    <md-tab-group>
    <md-tab label="PERSONAL">Personal content</md-tab>
      <md-tab label="SOCIAL">Social content</md-tab>

      <md-tab label="BUSINESS">Business content

        <b-app></b-app>
      </md-tab>
    </md-tab-group>
  </div>


<div class="flex-item2">
  <div class="item item-5" fxLayout="column">
    <md-input-container class="search-area">
    <input mdInput placeholder="search" >
    <!--md-icon svgIcon="thumbs-up"></md-icon-->
    </md-input-container>

  </div>

</div>

个人内容
社会内容
业务内容

方法1使用（推荐）

当前位置：ng deep在这种情况下效果很好，但未来可能会贬值。推荐的方法是使用viewEn封装

在组件中，添加以下封装：

import { ViewEncapsulation } from '@angular/core';
@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

在component.css中添加以下内容：

.mat-tab-labels{
    justify-content: center; /* align items in Main Axis */
}

::ng-deep .mat-tab-labels{
    justify-content: center; /* align items in Main Axis */
}

链接到带有

视图封装的。无


方法2使用：：ng deep

在component.css中添加以下内容：

.mat-tab-labels{
    justify-content: center; /* align items in Main Axis */
}

::ng-deep .mat-tab-labels{
    justify-content: center; /* align items in Main Axis */
}

这是到的链接。
谢谢，但我不想让它拉伸，我希望他们移动到提供的中心材质
md中心选项卡
属性，还不知道如何在材质2中做到这一点，可能会覆盖css？我一直使用ng deep，但我从不喜欢这个想法。我很高兴我找到了你的答案，因为我不知道封装装饰。