html - Centering text vertically in a mat-header-col?

Question

How do we center the header title in a <mat-header-cell>? For example for:

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

Tried style="text-align: center" but no love.

The words Customer Orders should appear in a column like this:

Customer
 Orders

I thought about putting each word in a separate div, and aligning them with flexbox, but was wondering if there was a simpler way?

Here's the markup for the flexbox approach:

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

Stackblitz Demo of Answer

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

If adding sorting

Be aware of this issue:

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

Adding the sort directive adds this class:

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

}

If you comment out, as shown, display:flex and align-items: center it will work. However order matters in CSS, so this has to be done after the directive adds it's won CSS, which is more tricky. I'll just post this observation in the github issue and see what Google says.

Answer 1

Try something like this in the component's stylesheet

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