Css 角度材料2台收割台中心对齐

若将md排序标头添加到md表格中的md标头单元格中，则它始终是左对齐的。如何将标题单元格居中对齐，例如“名称”

名称

---

角材质5.x.x的更新，无需ng深度：

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

---

md header单元格

使用class=“mat sort header container”将其“翻译”为容器。使用该选项，可以将其样式设置为。使用flexbox将其内容居中。将以下内容放入组件样式表中：

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

---

公认的答案是正确的。但是，

：：ng deep

会贬值，将来可能会下降（）

暗影穿透子体组合器已被弃用，并且支持无效 正在从主要浏览器和工具中删除。因此，我们计划放弃 角度支撑（适用于所有3个/deep/、>>>和：：ng deep）。直到 那么，为了更广泛地兼容 工具

正确的方法是使用。在component.ts中，添加以下内容：

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

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

并重写component.css文件中的类：

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

---

我认为给定的问题解决方案在方法上过于严格，我遇到了一个类似的问题，我需要更改

mat sort header container

的一些css属性，但需要动态更改

我做了一些类似织女星的回答，但在风格选择上有细微的不同：

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

---

它为其父项打开了一些属性，以设置html代码中的样式

mat header cell

，因此无论您在

mat header cell

和从其父项继承的

ng deep

中提供什么样式，只有这些样式，除此之外没有其他样式会进入该层次结构。

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

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

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

然后在html上：

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

操作

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

<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>
...

---

按照

matColumnDef

中指定的名称应用对齐：ng deep未进行润滑！它很深/很深/很深。封装可能会影响其他类请阅读文档：

阴影穿透子体组合器已被弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对Angular的支持（对于/deep/、>>>和：：ng deep中的所有3个）。

感谢您的解决方案！我想补充一点，如果您只想将一个表头居中，那么您可以使用上面概述的css创建自己的自定义类，如

mat sort header container centered

，并将其分配给单元格，如下图所示

@DenissM。没错：）我也这样做，避免使用

：：ng deep

：：ng deep更容易使用，而且它真的贬值了吗？效果很好。非常感谢。谢谢你的回答，不过我还是用了ng deep的例子和Angular 7。

<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*/
}