如何使ag-grid中的单元格内容垂直居中？

How to make cell content in ag-grid centered vertically?

我试图通过设置 gridOptions.rowHeight 来降低 ag-grid 的行高。虽然这确实降低了行高，但内容并未在行中垂直居中。执行此操作的最佳方法是什么？

我也试过更改主题的grid-size参数，但遇到了同样的问题。

这是没有任何 gridOptions 的网格。我测量的行高是 42px（尽管文档说它应该是 25px）。

这是我将行高减小到 36px (gridOptions={{ rowHeight: 36 }}) 时得到的结果：

请注意，内容不再垂直居中。

当我将行大小增加到 100px 时，这一点变得更加明显。内容明显不居中

单元格内容只能使用 css 进行垂直对齐。

.ag-cell {
  display: flex;
  align-items: center;
}

您还可以在列定义中添加内联样式。

<AgGridReact
  rowHeight={50}
  defaultColDef={{
    cellStyle: (params) => ({
      display: "flex",
      alignItems: "center"
    })
  }}
  {...}
/>

现场演示