Angular материал 2 выравнивание центра заголовка таблицы

Ответ 1

Обновление для углового материала 5.xx, нет необходимости в ng-deep:

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

DEMO

md-header-cell получить "переведено" в контейнер с class= "mat-sort-header-container". Используя это, вы устанавливаете его стиль с помощью ng-deep. Используйте flexbox, чтобы центрировать его содержимое. Поместите следующее в таблицу стилей компонентов:

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

DEMO

Ответ 2

Принятый ответ правильный. Тем не менее, ::ng-deep устарел и, возможно, будет удален в будущем (официальная документация).

Пронзающий теневой комбинатор не рекомендуется, и поддержка удаляется из основных браузеров и инструментов. Таким образом, мы планируем отказаться от поддержки в Angular (для всех 3 of/deep/, >>> и :: ng-deep). До тех пор :: ng-deep следует предпочитать для более широкой совместимости с инструментами.

Правильный способ - использовать ViewEncapsulation. В ваш component.ts добавьте следующее:

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

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

и переопределите класс в вашем файле component.css:

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

Ответ 3

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

Ответ 4

Я думаю, что данные решения проблемы слишком строгие в их подходе, у меня была аналогичная проблема, когда мне нужно было изменить некоторые свойства css mat-sort-header-container, но динамически.

Я сделал что-то вроде ответа Vega, но немного отличался от того, как стили принимаются:

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

который открывает некоторые свойства для своего родителя в стиле mat-header-cell, который находится в вашем html-коде, поэтому независимо от стиля, который вы предоставляете в mat-header-cell и в ng-deep, который наследуется от его родителя, тогда только эти стили и не что иное, как что пойдет вниз по этой иерархии.

Ответ 5

Если вы не хотите, чтобы все ячейки заголовка выравнивались по центру, вы можете объединить два класса:

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

Тогда на HTML:

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