素材を2つ作成して全ページサイズを使用する方法

Question

2つのタブを持つタブグループを作成したいと思います。タブグループはフルページサイズを使用する必要があり、個々のタブは同じ幅になるはずです。次は私が

<md-tab-group fxFlexFill> 
    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon>description</md-icon> Content Privileges 
     </ng-template> 
     Content Privileges 
    </md-tab> 
    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon>flash_on</md-icon> Application Privileges 
     </ng-template> 
     Application Privileges 
    </md-tab> 
</md-tab-group> 

を使用していたコードであり、ここで

上のタブは、全幅を使用していないの出力です。ラベルのアイコンとテキストが揃っていない。

どうすればいいですか？

Answer 1

次のCSSを使用すると、それらを均等に広げることができます。アライメント問題の

/deep/ .mat-tab-label { 
    width: 50%; 
} 

demo

Answer 2

：私はちょうどmd-iconでvertical-align:middle;を使用してスパンでのdivを変更しました。それは働いているようだ。

<div> 
    <md-tab-group > 
    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon style="vertical-align:middle;">description</md-icon> 
      <span class="title">Content Privileges</span> 
     </ng-template> 
     Content Privileges 
    </md-tab> 
    <md-tab> 
     <ng-template md-tab-label> 
      <md-icon style="vertical-align:middle;">flash_on</md-icon> 
      <span class="title">Application Privileges</span> 
     </ng-template> 
     Application Privileges 
    </md-tab> 
    </md-tab-group> 
</div>