Align checkbox to center-CodePudding

I am using v-data-table. I am trying to align the checkbox to center because it is automatically aligned left when using the data table even if I used align: center on it. Here is the object on my data table header: { text: this.$t('Actions'), value: 'actions', width:'10%', align:'center', sortable: false , divider: true},

On my v-data-table tag, I used on <template> tag as follows:

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

I tried using the <center> tag, align-items: center on CSS when I assigned a class on it, using the and . But none of them worked. Is there any way to manipulate the alignment of data in v-data-table?

CodePudding user response：

Use class d-flex justify-center.

justify-center works only when the display is flex. so set it using d-flex

CodePudding user response：

You can try below:

<template>
  <v-container  fluid >

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

  </v-container>
</template>