网格表：垂直对齐：中间

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

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

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

这会工作得很好。

Answer 2

You can use below CSS. No need to use hard-coded values in CSS for height.

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

Have a look at this plunk: ag-grid: text-align vertically center

Answer 3

以@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 列定义中使用属性中的自定义 css 样式cellClass。

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