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

Question

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

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

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

Answer 1

要获得预期的结果，请在css中设置行高，以使内容垂直居中

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

Answer 2

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

首先，删除底部的3个CSS属性以及text-align属性，因为fxLayoutAlign属性将为您提供：

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

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

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

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