表格栏中的居中复选框

Question

我试图将复选框在表格列中居中，但未成功。无论我使用哪种对齐方式，复选框始终显示为左对齐。奇怪的是，如果我更改v-btn的v-checkbox，则相同的代码也可以工作。这个问题有什么解决办法吗？

https://codepen.io/anon/pen/QVqqVP

以下是简单的查看代码：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="apps" :headers="headers" hide-actions class="elevation-1">
            <template slot="items" slot-scope="props">
                <td class="text-xs-left">
                    <h6 class="mb-0">{{props.item.app_name}}</h6>
                </td>
                <td class="text-xs-center">
                    <v-checkbox color="primary"/> 
                </td>
            </template>
            </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

这里是Vue应用：

new Vue({
  el: '#app',
  data: () => ({
    apps: [{'app_name':"row1"}, {'app_name':"row2"}]
  })
})

Answer 1

当然，鉴于您拥有的HTML结构，它不能以td为中心

实际的复选框隐藏在许多嵌套的div元素内部。默认情况下，每个元素都有display: block;，这意味着它会获取其父元素允许获取的所有水平空间。

最重要的是，您正在使用的元素是使用flexbox显示的。

您可以在复选框的中央添加以下CSS代码：

.v-input__slot {
  align-items: center;
  justify-content: center;
}

Answer 2

我找到了Vue 2.6.10的解决方案

<td class="text-xs-center">
    <v-checkbox :input-value="props.item.closed" readonly hide-details class="align-center justify-center"></v-checkbox>
</td>

添加

  

class =“ align-center调整中心”

在复选框上完成技巧