Centrum align MD-tab-grupa Header

Question

Chcę wyśrodkować mój pasek kart, gdzie są wyświetlane etykiety tak, że można dodać pasek boczny po lewej stronie, która jest połączona z tabs.Here za mojego kodu:

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

Answer 1

Approach 1 Korzystanie ViewEncapsulation (zalecane)

:: ng-głębokie prace świetnie w tej sprawie, jednak może amortyzowane przyszłości. Zalecanym sposobem jest użycie ViewEncapsulation.

W komponentu, dodaj następującą enkapsulacji:

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

Dodaj następujący w component.css:

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

Link do Plunker Demo z ViewEncapsulation.None

---

Appr oach 2 przy użyciu :: ng głęboko

Dodaj następujący w component.css:

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

Tu jest link do PLUNKER DEMO.