CSS 角材料 2 表头中心对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46154838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular material 2 table header center alignment
提问by Yong
If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"?
如果将 md-sort-header 添加到 md-table 中的 md-header-cell 中，则始终为左对齐。如何居中对齐标题单元格，例如“名称”？
<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center">
Name
</md-header-cell>
回答by Vega
Update for Angular Material 5.x.x, no need for ng-deep:
Angular Material 5.xx 更新，无需 ng-deep：
mat-header-cell {
display:flex;
justify-content:flex-end;
}
md-header-cellget 'translated' to a container with class="mat-sort-header-container". Using that, you set its style with ng-deep. Use flexbox to center its content. Put the following in the components stylesheet:
md-header-cell将“翻译”到 class="mat-sort-header-container" 的容器。使用它，您可以使用ng-deep. 使用 flexbox 将其内容居中。将以下内容放入组件样式表中：
::ng-deep .mat-sort-header-container {
display:flex;
justify-content:center;
}
回答by Faisal
The accepted answer is correct. However, ::ng-deepis depreciated and maybe dropped in future (official documentation).
接受的答案是正确的。但是，::ng-deep已折旧，将来可能会下降（官方文档）。
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
不推荐使用阴影穿透后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对于 /deep/、>>> 和 ::ng-deep 中的所有 3 个）。在那之前 ::ng-deep 应该是首选，因为它与工具更广泛地兼容。
The proper way is to use ViewEncapsulation. In your component.ts, add the following:
正确的方法是使用ViewEncapsulation。在您的 component.ts 中，添加以下内容：
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
and override the class in your component.css file:
并覆盖 component.css 文件中的类：
.mat-sort-header-container {
display:flex;
justify-content:center;
}
回答by dayderluv
.mat-header-cell { text-align: center; }
回答by guizo
If you don't want all header cells to align-center you can combine two classes:
如果您不希望所有标题单元格居中对齐，您可以组合两个类：
.mat-header-cell.text-center { text-align: center; }
Then on the html:
然后在html上：
<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>
回答by Aakash Uniyal
I think the given solutions to the problem are too strict in their approach, i had a similar issue where i needed to change some css properties of mat-sort-header-container, but dynamically.
我认为该问题的给定解决方案在他们的方法中过于严格，我遇到了类似的问题，我需要mat-sort-header-container动态更改 的某些 css 属性。
I did something like Vega's answer but minutely different on how styles are taken :
我做了一些类似于 Vega's answer 的事情，但在如何采用样式方面略有不同：
::ng-deep .mat-sort-header-container{
justify-content: inherit;
/* other inheritable properties */
}
which opens some properties for its parent to style mat-header-cellwhich is in your html code so whatever style you provide in mat-header-celland in the ng-deepwhich is inheriting from its parent then only those styles and none other than that would go down that hierarchy .
它为其父级打开了一些属性，以样式mat-header-cell在您的 html 代码中，因此无论您mat-header-cell在ng-deep其中提供的样式以及从其父项继承的样式，都只有这些样式，而没有其他样式会沿该层次结构下降。
