Html 将表格单元格内的按钮移动到中心

我有一个按钮在一个表单元格内。表是这样的：

      <b-table
        v-if="rows.length"
        :thead-tr-class="'bug-report-thead'"
        :tbody-tr-class="'bug-report-tbody'"
        :items="rows"
        :fields="columnsToDisplay"
        :sort-compare="sortTableByKey"
        :striped="true"
        :bordered="true"
        :outlined="true"
        :hover="true"
        :no-sort-reset="true"
        :show-empty="true"
        :filter="filter"
        @filtered="onFiltered"
        :empty-text="emptyText"
        :sort-desc="true"
        :caption-top="true"
        responsive>
/b-table>

/b表>

按钮是这样的

<template slot="iinstances" slot-scope="row">
  <div v-if=" total_rows>0 && row.item.imProdInstDet!=''">  
    <b-button style="text-align: center" :variant="'primary'" @click.stop="row.toggleDetails" class="mr-1"> 
      More Details
    </b-button>
  </div>
</template>

更多细节

---

如何将上述按钮移动到单元格的中心？我试过，

margin:auto；显示：块如下所示：但这似乎不起作用
 每个列的自定义样式和类的字段对象中都有一个属性

试试这样：


测试
导出默认值{
名称：“应用程序”，
数据：（）=>({
字段：['id'，'name'，{key:'button'，class:'text center'}]，
项目：[
{id:1，名称：'Row 1'}，
{id:2，名称：'Row 2'}，
{id:3，名称：'Row 3'}，
{id:4，名称：'row4'}，
{id:5，名称：'row5'}，
],
}),
};
Give
text align:center
到
td
，其中有
按钮
it@Kenny，这是一个引导vue表。我没有为此单独创建行。根据存在的数据，将创建行。我只以
键
和
标签
的形式创建了列名。因此，似乎找不到可以传递上述内容的选项。您正在查找
数据对齐
&
数据对齐
。您可以使用