मध्य संरेखित MD-टैब-समूह हैडर लेबल

Question

मैं अपने टैब बार जहां से लेबल दिखाई केंद्रित करने के लिए इतना है कि मैं छोड़ दिया है कि tabs.Here मेरे कोड से जुड़ा है पर एक साइड बार जोड़ सकते हैं चाहते हैं:

<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

दृष्टिकोण 1 ViewEncapsulation (अनुशंसित) का उपयोग कर

:: एनजी-गहरे काम करता है इस मामले में महान, लेकिन यह हो सकता है आगे जाने का मूल्यह्रास हुआ। ViewEncapsulation का उपयोग करने का अनुशंसित तरीका है।

अपने घटक में, जोड़ने के निम्नलिखित कैप्सूलीकरण:

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

लिंक Plunker Demo करने के लिए ViewEncapsulation.None

---

साथ:

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

अपने component.css में निम्नलिखित जोड़ें appr oach 2 का उपयोग :: एनजी गहरा

अपने component.css में निम्नलिखित जोड़ें:

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

यहाँ PLUNKER DEMO करने के लिए एक कड़ी है।