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

【问题标题】：Ngx-datatable header cell text are not vertically alignedNgx-datatable 标题单元格文本未垂直对齐
【发布时间】：2019-06-15 20:53:56
【问题描述】：

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

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

问题 - 文本 - “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

【问题讨论】：

可以在stackblitz.com上显示吗？
你应该分享最少的代码来重现这个。
@JitendraG2 Stackblitz 链接已提供。
@VilleKoo 包含了数据表的 html

标签： css angular ngx-datatable

【解决方案1】：

这是添加全局样式后的工作

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

【讨论】：

【解决方案2】：

这对我有用

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

【讨论】：

【解决方案3】：

在 globle 样式中试试这个。

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

【讨论】：

是的，这在标题高度为“自动”时有效。当页眉高度为 50 时，所有单行文本都在底部对齐，对于多行文本，最后一部分被隐藏。我该如何解决这个问题。？
这不是内容居中的问题，如果你将页眉高度设置为50，当然多行内容是不可见的。
同意@VilleKoo。在这种特殊情况下，我建议当高度为 50 时。使用.datatable-header{ height: 50px !important; display: flex !important; }，如果高度为 auto 或 50，则不会产生任何问题。