css - Ngx-datatable 标题单元格文本未垂直对齐

Question

我在我的 Angular 元素中使用 ngx-datatable。列是 ->“估计生产率”、“Wk1Rate”、“WK2Rate”、“WK3Rate”。

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

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

如何使这些列垂直居中对齐？我试过垂直对齐:中间，但没有用。请帮忙。

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

在 globle 样式中试试这个。

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