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

Question

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

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

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

将行高度降低到36px（gridOptions={{ rowHeight: 36 }}）时，我得到的是这样：

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

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

Answer 1

单元格内容只能使用CSS垂直对齐。

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

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

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

实时演示