角材料2表頭中心對齊

如果md-sort-header被添加到md-table中的md-header-cell中，它總是左對齊的。如何居中對齊標題單元格，如「名稱」？角材料2表頭中心對齊

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> Name </md-header-cell>

2017-09-11 Yong

md-header-cell GET '翻譯' 與類= 「墊排序集管容器」的容器。使用它，您可以使用ng-deep設置其風格。所以放在部件的樣式表如下：

之一：

::ng-deep .mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
}

或

mat-header-cell { 
    display:flex; 
    justify-content:flex-end; 
    }

2017-09-11 12:21:13 Vega

看看我的答案以及將來參考類似的問題，+1的答案。 – Faisal

接受的答案是正確的。但是，::ng-deep已折舊並可能在將來（official documentation）丟失。

不推薦使用陰影刺穿後代組合器，並且支持將從主要瀏覽器和工具中刪除。因此，我們計劃在Angular中刪除支持（對於/ deep /，>>>和:: ng-deep的所有3個）。直到那麼:: ng-deep應該更適合與這些工具的更廣泛的兼容性。

正確的方法是使用ViewEncapsulation。在你component.ts，添加以下內容：

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
})

，並覆蓋在你的component.css文件中的類：

.mat-sort-header-container { 
    display:flex; 
    justify-content:center; 
}

2017-09-11 12:45:39 Faisal

：ng-deep不被剝奪！它/深/只。封裝可能會影響其他類 – Vega

請閱讀文檔：不推薦使用陰影穿孔後代組合器，並且正在從主流瀏覽器和工具中刪除支持。因此，我們計劃放棄對Angular的支持（對於所有3個/ deep /，>>>和:: ng-deep）。' – Faisal

@Vega，我不是說你的回答不起作用，OP可能會面對一旦':: ng-deep'被完全刪除，未來的一個問題。 – Faisal

我覺得這個問題給出的解決方案是在他們的做法太嚴格，我有一個類似的問題，我需要改變一些css屬性mat-sort-header-container，但動態。

我不喜歡的東西Vega的答案，但細微不同的樣式如何採取：

::ng-deep .mat-sort-header-container{ 
    justify-content: inherit; 
    /* other inheritable properties */ 
}

這將打開其父一些屬性風格 mat-header-cell這是你的HTML代碼，以便您在 mat-header-cell提供與任何風格

在ng-deep這是從它的父母繼承，那麼只有那些樣式和其他沒有比那將下降該層次結構。

2018-01-25 09:13:47

回答