html - 在 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

添加排序指令添加这个类:

.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 中的顺序很重要，所以这必须在指令添加它的 won CSS 之后完成，这更棘手。我会在 github 问题中发布这个观察结果，看看 Google 怎么说。

Answer 1

在组件的样式表中尝试这样的东西

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