表格列中的居中复选框

Question

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

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

我找到了 Vuetify 2.4.0 的解决方案

<td class="text-center">
  <v-checkbox class="d-inline-flex"></v-checkbox>
</td>

添加

class="d-inline-flex"

在

v-checkbox

组件上

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 =“对齐中心对齐中心”

在复选框上完成技巧

Answer 3

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

td

为中心：

实际的复选框隐藏在许多嵌套的

div

元素深处。默认情况下，每个元素都有

display: block;

，这意味着它会获取其父元素允许其获取的所有水平空间。

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

您可以添加以下 CSS 代码将复选框居中：

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

Answer 4

隐藏详细信息可防止显示错误消息。如果不使用此道具，则无法垂直居中。

<v-checkbox v-model="checked" hide-details/>