使用 CSS 将 AgGrid 控件的组 headers 中的文本垂直居中？

Question

我正在使用 React 并尝试让此屏幕截图中左侧的组标签垂直居中，与值相同。

我尝试了以下方法但没有结果：

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

Answer 1

您是否尝试过为要垂直居中的标签添加边距自动？

margin: auto;

Answer 2

您可以尝试以下任一方法：

line-height 设置为单元格的高度（如果这是可预测的）
vertical-align: middle

没有更多的代码，这就是我的建议。

Answer 3

你的方法是正确的。但是如果您检查该元素，您可以看到包含箭头和单元格文本的容器有一个名为 ag-cell-wrapper 的 class 名称，因此您需要改为定位该元素：

/* increase CSS specificity to override the ag-grid styles */
.ag-cell-wrapper.ag-cell-wrapper.ag-cell-wrapper {
  display: flex;
  align-items: center;
}

使用 CSS 将 AgGrid 控件的组 headers 中的文本垂直居中？

Vertically center the text in the group headers for an AgGrid control using CSS?

css

reactjs

ag-grid