角材2工作台中心对齐 [英] angular material 2 table header center alignment

问题描述

如果将md-sort-header添加到md-table的md-header-cell中，则始终为左对齐.如何居中对齐标头单元格(例如名称")?

If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"?

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr

推荐答案

更新Angular Material 5.x.x，无需ng-deep:

Update for Angular Material 5.x.x, no need for ng-deep:

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

演示

md-header-cell被翻译"为具有class ="mat-sort-header-container"的容器.使用它，您可以使用 ng-deep设置其样式. .使用flexbox使其内容居中.将以下内容放在组件样式表中:

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;
}

演示

这篇关于角材2工作台中心对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！