reactjs - ag-网格表 : Vertical-align: middle

Question

我正在使用框架ag-grid()我已将行高更改为 50px。

<div 
  className="ag-theme-balham"
  style={{ 
    height: '90vh', 
    width: '100%',
    'font-size': '18px',
    'row-height': '50px'
    }} 
    >
    <AgGridReact        
        rowHeight={50}
        columnDefs={columnsTaenze}
        rowSelection={'multiple'}
        onFirstDataRendered={this.autoSizeAll}
        rowDragManaged={true}
        enableColResize={true}
        animateRows={true}
        rowData={this.props.tabledata}
        enableFilter={true}
        onRowDragEnd={this.onRowDragEnd}>
    </AgGridReact>
</div>

遗憾的是，我无法将单元格垂直居中。

我尝试更改许多类，包括ag-cell。我尝试过的CSS:

.ag-cell{
    line-height: 50px;
    height: 100%;
    vertical-align: middle;
}

但是单元格没有居中:

//编辑/提示

如果你想帮自己一个忙，你应该切换到 react-table来自 Tanstack NOT AG-GRID 公司

Answer 1

您可以使用以下 CSS。无需在 CSS 中使用硬编码值作为高度。

.ag-row .ag-cell {
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}

看看这个小东西:ag-grid: text-align vertically center