中心對齊MD-選項卡組頭標籤

我想中心，顯示在標籤我的標籤欄，這樣我可以添加在連接到tabs.Here的我的代碼的左側邊欄：中心對齊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>

來源

2017-08-10 Jacob

https://stackoverflow.com/a/45270786/1791913 – Faisal

謝謝，但我不想讓它伸展，我希望它們移動到中心 – Jacob

材料提供了'md-center-tab'屬性，dont有一個想法，但如何在Material2中做到這一點，也許重寫CSS？ – Faisal

方法1使用ViewEncapsulation（推薦）

:: NG深的偉大工程在這種情況下，但它可能貶值前進。推薦的方法是使用ViewEncapsulation。

在您的組件，添加以下封裝：

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

添加在您的component.css如下：

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

鏈接到Plunker Demo與ViewEncapsulation.None

APPR oach 2使用:: NG-深

添加在您的component.css如下：

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

這裏是PLUNKER DEMO的鏈接。

來源

2017-08-10 14:48:04 Faisal

謝謝，它已經奏效。 – Jacob

中心對齊MD-選項卡組頭標籤

回答

相關問題