'Align checkbox to center

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 class="text-center" and class="justify-center". But none of them worked. Is there any way to manipulate the alignment of data in v-data-table?

cssvuetify.js


Solution 1:[1]

Use class d-flex justify-center.

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

Solution 2:[2]

You can try below:

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

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

  </v-container>
</template>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitheesh
Solution 2 Frontend Team

Related Questions