ag-grid 表：垂直对齐：中间

Posted 2023-03-28

【中文标题】ag-grid 表：垂直对齐：中间

【英文标题】：ag-grid table: Vertical-align: middle

【发布时间】：2019-05-01 14:40:21

【问题描述】：

我正在使用框架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;

但是单元格没有居中：

【参考方案1】：

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

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

看看这个 plunk：ag-grid: text-align vertically center

【讨论】：

我正在尝试进行水平对齐并且还使用类型：“rightAligned”，但是这个flex 解决方案似乎破坏了水平对齐。我正在尝试通过 CSS 将填充传递给单元格，但只有 paddingRight 和 paddingLeft 有效，您对我应该做什么有任何线索吗？

如果我们这样做，cellStyle 将不会生效

你破坏了网格的 CSS 样式。

【参考方案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,
  
]

【参考方案3】：

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

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

这对我有用。

【讨论】：

我喜欢这种方式而不是修改所有的ag-cell，更灵活