ag-grid table: Vertical-align: middle
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
To build on @Paritosh's answer...
You don't have to overwrite the ag-grid styles themselves. You can do something like this in your own stylesheet:
.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;
}
Then in your ag-grid column definition use your custom css style in the cellClass
property.
var columnDefs = [
{
headerName: "Alerts",
colId: 'invoice_issues',
editable: false,
cellClass: "cell-border cell-vertical-align-text-right",
valueGetter: showInvoiceIssues,
autoHeight: true,
}
]
You can set cell style to following
cellStyle: {
'height': '100%',
'display': 'flex ',
'justify-content': 'center',
'align-items': 'center ',
},
it's work for me.