AG Grid单元格内图标居中对齐问题求助

问题核心原因 #

• align-items: center是Flex容器属性，默认<span>是行内元素，设置后不生效
• 图标父容器未占满单元格宽度，导致text-align: center无法实现整体居中

解决办法 #

方法1：通过列配置直接设置（最简便）

在AG Grid的列定义中，给目标列添加cellStyle配置，直接让单元格内容居中：

columnDefs = [
  {
    field: '你的字段名',
    cellStyle: { textAlign: 'center' }
  }
];

这种方式不需要修改内部HTML结构，AG Grid会直接给单元格容器应用居中样式。

方法2：调整内部元素样式

如果需要自定义样式，修改HTML结构和行内样式：

<span class="ag-cell-value" role="presentation" id="cell-112">
  <span class="table-row-icon" style="display: block; width: 100%; text-align: center;">
    <i class="material-icons md-18" style="color: #ff6358;">done</i>
  </span>
</span>

或者用Flex布局实现：

<span class="ag-cell-value" role="presentation" id="cell-112">
  <span class="table-row-icon" style="display: flex; justify-content: center; width: 100%;">
    <i class="material-icons md-18" style="color: #ff6358;">done</i>
  </span>
</span>

也可以用全局CSS类统一设置，避免行内样式冗余：

.table-row-icon {
  display: flex;
  justify-content: center;
  width: 100%;
}

方法3：覆盖AG Grid默认样式

如果以上方法不生效，可能是AG Grid默认样式优先级更高，使用更具体的CSS选择器强制覆盖：

.ag-cell .ag-cell-value .table-row-icon {
  display: flex;
  justify-content: center;
  width: 100%;
}

内容的提问来源于stack exchange，提问作者MisterniceGuy