角度材料2表头中心对齐

Posted 2023-03-06

【中文标题】角度材料2表头中心对齐

【英文标题】：angular material 2 table header center alignment

【发布时间】：2018-02-19 15:28:02

【问题描述】：

如果 md-sort-header 添加到 md-table 中的 md-header-cell 中，它总是左对齐。如何将标题单元格居中对齐，例如“名称”？

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

plnkr

【参考方案1】：

如果您想逐列对齐标题和行单元格内容（允许列之间的不同对齐方式），您可以执行以下操作：

<mat-table>
    <ng-container matColumnDef="myColumn">
      <mat-header-cell *matHeaderCellDef> My Column </mat-header-cell>
      <mat-cell *matCellDef="let element"> element.myField </mat-cell>
    </ng-container>
...

.mat-column-myColumn
  display: flex !important;
  justify-content: flex-start !important; /* Left aligned*/

通过matColumnDef 中指定的名称应用对齐方式。

【参考方案2】：

如果您不希望所有标题单元格对齐中心，您可以组合两个类：

.mat-header-cell.text-center  text-align: center; 

然后在html上：

<th mat-header-cell *matHeaderCellDef class="text-center">Actions</th>

【参考方案3】：

.mat-header-cell     text-align: center;    

【参考方案4】：

Angular Material 5.x.x 的更新，不再需要 ng-deep：

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

DEMO

---

md-header-cell 被“翻译”为具有 class="mat-sort-header-container" 的容器。使用它，您可以使用ng-deep 设置其样式。使用 flexbox 将其内容居中。将以下内容放入组件样式表中：

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

DEMO

【讨论】：

效果很好。谢谢！

感谢您的回答，不过我确实必须在 Angular 7 中使用 ng-deep 示例。

【参考方案5】：

我认为给定的问题解决方案在他们的方法上过于严格，我遇到了类似的问题，我需要更改 mat-sort-header-container 的一些 css 属性，但要动态更改。

我做了类似 Vega 的回答，但在风格的采用方式上略有不同：

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

它为其父级打开一些属性以设置您的html代码中的mat-header-cell 样式，因此无论您在mat-header-cell 和从其父级继承的ng-deep 中提供的任何样式，都只有那些样式，而没有别的这会沿着那个层次结构下去。

【参考方案6】：

接受的答案是正确的。但是，::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;

【讨论】：

:ng-deep 没有被贬低！它只是 /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).

感谢您的解决方案！我想补充一点，如果您只想将一个表头居中，那么您可以使用上面概述的 css 创建您自己的自定义类，其名称为 mat-sort-header-container-centered，并将其分配给您的单元格，如下所示 <md-header-cell *cdkHeaderCellDef md-sort-header class="mat-sort-header-container-centered">

@DenissM。是的，完全正确:) 我也这样做，避免使用::ng-deep。

::ng-deep 好用，真的贬值了吗？