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

Posted 2023-03-28

【中文标题】使用 CSS 将 AgGrid 控件的组标题中的文本垂直居中？

【英文标题】：Vertically center the text in the group headers for an AgGrid control using CSS?

【发布时间】：2021-12-06 13:21:09

【问题描述】：

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

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

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

【问题讨论】：

请添加您的 html（呈现的）和其余相关 CSS（如果有）以获得最佳答案。您愿意使用 CSS display: grid 作为解决方案吗？

【参考方案1】：

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

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

【讨论】：

完美！谢谢 NearHuscarl。

【参考方案2】：

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

margin: auto;

【参考方案3】：

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

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

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