垂直对齐 ag-grid 单元格内的文本

Question

我正在创建一个将在大屏幕上显示的网格，并且需要具有较大的行高和文本才能从远处看到。问题是我的单元格中的文本与未居中的单元格顶部对齐。我已将 rowHeight 设置为 100，将 rowClass 设置为 'large-row'。我在网上找到了 css 的后 3 行，但没有帮助。下图显示了我的问题。

.large-row {
 text-align: center !important;
 font-size:2.5em;
 font-weight: bolder;

 display: inline-block;
 vertical-align: middle;
 line-height: normal;
}

Answer 1

Angular 2+ 具有 an API called "fxFlex"，它提供了一个名为 "fxLayoutAlign" 的 HTML 属性，使对齐元素变得轻而易举。

首先，删除底部的 3 个 CSS 属性以及文本对齐属性，因为 fxLayoutAlign 属性将为您提供它：

.large-row {
   font-size:2.5em;
   font-weight: bolder;
}

在您的 HTML 中，您将使用以下变体：

<div class="large-row" fxLayoutAlign="center center"> ..... </div>

This site 允许您使用 fxFlex API。我几乎每天都在工作中使用它。这是一个很棒的资源

Answer 2

为达到预期效果，请在 css 中设置行高以使内容垂直居中

.ag-cell { line-height: 18px; }

垂直对齐 ag-grid 单元格内的文本

aligning text inside ag-grid cell vertically

css

ag-grid

angular