angular material 2 table header center alignment
.mat-header-cell { text-align: center; }
Update for Angular Material 5.x.x, no need for ng-deep:
mat-header-cell {
display:flex;
justify-content:flex-end;
}
DEMO
md-header-cell
get 'translated' to a container with class="mat-sort-header-container". Using that, you set its style with ng-deep
. Use flexbox to center its content. Put the following in the components stylesheet:
::ng-deep .mat-sort-header-container {
display:flex;
justify-content:center;
}
DEMO
The accepted answer is correct. However, ::ng-deep
is depreciated and maybe dropped in future (official documentation).
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). Until then ::ng-deep should be preferred for a broader compatibility with the tools.
The proper way is to use ViewEncapsulation. In your component.ts, add the following:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
and override the class in your component.css file:
.mat-sort-header-container {
display:flex;
justify-content:center;
}