How to set Angular Kendo grid button text on center?

Viewed 551

Currently I am using grid view of Kendo UI for angular. Here I have some button on grid but the problem is the text of the button is not in center, however I have applied some styles like (text-align:center) but nothing works. Here is my button template

<kendo-grid-command-column title="SPO Item Count" width="120">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                <button pButton type="button"
                                                        style="margin-bottom:10px;margin-right:10px; width: 100px; text-align:center" (click)="onEditCostClick(dataItem);"
                                                        class="p-mr-2 p-mb-2 p-ripple p-button p-component">
                                                    {{dataItem.spoItemCount}}
                                                </button>
                                            </ng-template>
                                        </kendo-grid-command-column>

and here is what I get in browser

enter image description here

1 Answers
<kendo-grid-command-column title="SPO Item Count" width="120">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                <button pButton type="button"
                                                        style="margin-bottom:10px;margin-right:10px; width: 100px; display:flex; justify-content:center; align-items:center;" (click)="onEditCostClick(dataItem);"
                                                        class="p-mr-2 p-mb-2 p-ripple p-button p-component">
                                                    {{dataItem.spoItemCount}}
                                                </button>
                                            </ng-template>
                                        </kendo-grid-command-column>
Related