如何在中心设置Angular Kendo 网格按钮文本？

Question

目前我正在为 angular 使用 Kendo UI 的网格视图。这里我在网格上有一些按钮，但问题是按钮的文本不在中心，但是我应用了一些样式，如 (text-align:center) 但没有任何效果。这是我的按钮模板

<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>

这是我在浏览器中得到的结果

Answer 1

<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>

如何在中心设置Angular Kendo 网格按钮文本？

How to set Angular Kendo grid button text on center?

css

kendo-ui

angular