将复选框居中对齐

Question

我正在使用 v-data-table。我试图将复选框居中对齐，因为它在使用数据 table 时自动左对齐，即使我在其上使用 align: center 也是如此。这是我的数据 table header 上的 object： { text: this.$t('Actions'), value: 'actions', width:'10%', align:'center', sortable: false , divider: true},

在我的 v-data-table 标签上，我在 <template> 标签上使用如下：

<template v-slot:item.visibility="{ item }">
    <v-checkbox
      v-model="item.isVisible">
    </v-checkbox>
</template>

我尝试在 CSS 上使用 <center> 标签，在 CSS 上使用 align-items: center 当我在其上分配 class 时，使用 class="text-center" 和 class="justify-center".但其中 none 有效。有什么方法可以操纵 v-data-table 中的数据对齐方式吗？

Answer 1

使用classd-flex justify-center。

justify-center 仅在显示为 flex 时有效。所以使用 d-flex

设置它

Answer 2

您可以尝试以下操作：

<template>
  <v-container class="d-flex justify-center" fluid >

    <v-checkbox
      v-model="item.isVisible">
    </v-checkbox>

  </v-container>
</template>

将复选框居中对齐

Align checkbox to center

css

vuetify.js