ag-grid表格:垂直对齐:中间

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;
}

但是单元格没有居中：

​

Answer 1

你可以使用下面的CSS。不需要在CSS中使用硬编码值来表示高度。

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

看一下这段插曲：ag-grid: text-align vertically center

Answer 2

以@Paritosh的答案为基础...

您不必覆盖ag-grid样式本身。您可以在自己的样式表中执行类似的操作：

.cell-vertical-align-text-left {
  display: flex!important;
  align-items: center;
}

.cell-vertical-align-text-right {
  display: flex!important;
  flex-direction: row-reverse;
  text-align: right!important;
  align-items: center;
}

然后在您的ag-grid列定义中，在cellClass属性中使用您的自定义css样式。

var columnDefs = [
  {
    headerName: "Alerts",
    colId: 'invoice_issues',
    editable: false,
    cellClass: "cell-border cell-vertical-align-text-right",
    valueGetter: showInvoiceIssues,
    autoHeight: true,
  }
]

Answer 3

您可以将单元格样式设置为以下样式

 cellStyle: {
        'height': '100%',
        'display': 'flex ',
        'justify-content': 'center',
        'align-items': 'center ',
      },

这是我的工作。