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

【问题标题】：aligning text inside ag-grid cell vertically垂直对齐 ag-grid 单元格内的文本
【发布时间】：2019-05-03 01:22:56
【问题描述】：

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

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

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

【问题讨论】：

您使用的是哪个版本的 Angular？
Angular 版本 6.0.2
..ag-cell { justify-content: center; }
@NagaSaiA 似乎没有用。我什至添加了 !important
@JamesMorris，试试 .ag-cell { line-height: 18px; }

标签： css angular ag-grid

【解决方案1】：

为了达到预期的效果，在 css 中设置 line-height 以使内容垂直居中

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

【讨论】：

【解决方案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。我几乎每天都在工作中使用它。这是一个很棒的资源

【讨论】：