AG-Grid Header can't be aligned to center

i am using angular 15 and now developing an aplication that works like excel using ag grid. i already add the header class to center

[defaultColDef]="{ resizable: false, sortable: false, editable: false, flex: 1 ,headerClass: 'header-center'}"


with this css:

.header-center {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}


i also trying to inspect the console and enter image description here

do some customization but still not working

.ag-header-group-cell-label, .ag-header-cell-label {
display: flex;
flex: 1 1 auto;
overflow: hidden;
align-items: center;
text-overflow: ellipsis;
align-self: stretch;
justify-content: center;
text-align: center;
position:relative ;
}
.ag-fresh .ag-header-cell-label{
float: none !important;
width: auto !important;
justify-content: center;
}
.ag-fresh .ag-header-cell-menu-button{
position: absolute;
float: none;
}*

.my-header-class .ag-header-cell-label {
justify-content: center !important;
font-size: 10px !important;
}


does anybody has solution, Thank you

Continue reading...