Ngx数据表标题单元格文本未垂直对齐

Question

我在我的角度项目中使用ngx-datatable。 列是->“估计的生产率”，“ Wk1Rate”，“ WK2Rate”，“ WK3Rate”。

我使用css为文本应用了Wrapping，以便在标题单元格中容纳文本-“估计的生产率”。 因此，估计生产率以3行显示，而其他列名称以单行显示。 headerheight为'auto'，标题单元格的文本对齐方式为“ center”

问题-文本-“ Wk1Rate”，“ WK2Rate”，“ WK3Rate”-在标题单元格中未垂直对齐。这些文本显示在顶部，如图所示：

如何使这些列垂直居中对齐？ 我试过vertical-align：middle，但没有用。请帮忙。

ngx-datatable的

html代码：

    <ngx-datatable class="material" [rows]="MyRows" [headerHeight]="'auto'" [footerHeight]="40"
     [rowHeight]="37" [limit]="10">
        <ngx-datatable-column name="Est Production Rate" [sortable]="false" 
         [width]="85">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Wk1Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk2Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk3Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

stackblitz

Answer 1

尝试采用全球风格。

.datatable-header-cell
{
   display: flex !important;
   align-items: center !important;
}

Answer 2

这对我有用

.ngx-datatable .datatable-body .datatable-body-row > div {
   align-items: center;
}

Answer 3

此功能适用于添加globle样式

.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
  text-align: center;
}