在mat-h​​eader-col中将文本垂直居中？

Question

我们如何将标题标题放在<mat-header-cell>中？例如：

        <mat-header-cell style="text-align: center" *matHeaderCellDef>Customer Orders</mat-header-cell>

尝试过style="text-align: center"但没有爱。

Customer Orders一词应出现在这样的列中：

Customer
 Orders

我考虑过将每个单词放在一个单独的div中，然后将它们与flexbox对齐，但是想知道是否有更简单的方法吗？

以下是flexbox方法的标记：

  <mat-header-cell *matHeaderCellDef>
        <div>Customer</div>
        <div>Orders</div>
  </mat-header-cell>

Stackblitz答案演示

https://stackblitz.com/edit/angular-minimal-material-table-demo-center-header?file=src%2Fapp%2Fapp.component.html

如果要添加排序

请注意以下问题：

https://github.com/angular/components/issues/16952

添加sort指令将添加此类：

.mat-sort-header-button {
    border: none;
    background: 0 0;
    /* display: flex; */
    /* align-items: center; */
   padding: 0;
   cursor: inherit;
   outline: 0;
   font: inherit;
   color: currentColor;

}

如果您注释掉了display:flex和align-items: center，如图所示，它将起作用。但是顺序在CSS中很重要，因此必须在指令添加了CSS后再执行，这比较棘手。我将把这个观察结果发布在github问题上，看看Google怎么说。

Answer 1

在组件的样式表中尝试类似的操作

.mat-header-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}