I cannot center a Vuetify checkbox in a row on a card.
I’ve tried text-center and these classed on the checkbox:
class="d-flex justify-center align-center">
I’ve tried the following CSS hacks with no luck:
.nothing {
text-align: center !important;
}
.nothing_more {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.center_me {
display: block;
align-items: center !important;
justify-content: center !important;
margin-left: auto;
margin-right: auto;
width: 100%;
}
This is my offending code:
<v-container class="mt-n5">
<v-row>
<v-col cols="12">
<v-card
class="mt-n7 my_elevation d-flex justify-center align-center">
<v-container>
<v-row>
<v-col cols="12" class="text-center">
<p class="text-subtitle-1">Your current balance is:</p>
</v-col>
</v-row>
<v-row class="mt-n8">
<v-col cols="12" class="text-center">
<p class="text-h6 font-weight-bold">{{ returnShop.country_currency_symbol }}30.00</p>
</v-col>
</v-row>
<v-divider></v-divider>
<v-row class="mt-2">
<v-col cols="12" class="text-center">
<p class="text-subtitle-1">How much would you like to use?</p>
</v-col>
</v-row>
<v-row
class="mt-n12"
>
<v-col
cols="12"
>
<v-checkbox
class=""
hide-details
v-model="useAllMyCredit"
color="#68007d"
label="I'd like to use all my credit"
></v-checkbox>
</v-col>
</v-row>
</v-container>
For completeness this is all the code on this template:
<template>
<v-container>
<v-row
>
<v-col
cols="6"
align="start"
>
<h1 class="text--h4 font-weight-regular oswald mt-3">
Customize</h1>
</v-col>
</v-row>
<v-row
class="mt-n5"
>
<v-col cols="8">
<v-tabs
vertical
color="#68007d"
>
<v-tab>
<v-icon left>
palette
</v-icon>
Colors
</v-tab>
<v-tab>
<v-icon left>
format_shapes
</v-icon>
Shapes
</v-tab>
<v-tab>
<v-icon left>
open_with
</v-icon>
Placement
</v-tab>
<v-tab>
<v-icon left>
text_fields
</v-icon>
Text
</v-tab>
<v-tab-item>
<v-card flat>
<v-card-text>
<p>
Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.
</p>
<p>
Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Aliquam lobortis. Aliquam lobortis. Suspendisse non nisl sit amet velit hendrerit rutrum.
</p>
<p class="mb-0">
Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Phasellus blandit leo ut odio.
</p>
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
</v-col>
<v-col
cols="4"
>
<v-row>
<v-col cols="12">
<v-card
shaped
flat
min-height="300px"
>
<v-card-title
class="purple_background oswald white--text mb-6"
>
<h2>You have store credit!</h2>
</v-card-title>
<v-container class="mt-n5">
<v-row>
<v-col cols="12">
<v-card
class="mt-n7 my_elevation d-flex justify-center align-center">
<v-container>
<v-row>
<v-col cols="12" class="text-center">
<p class="text-subtitle-1">Your current balance is:</p>
</v-col>
</v-row>
<v-row class="mt-n8">
<v-col cols="12" class="text-center">
<p class="text-h6 font-weight-bold">{{ returnShop.country_currency_symbol }}30.00</p>
</v-col>
</v-row>
<v-divider></v-divider>
<v-row class="mt-2">
<v-col cols="12" class="text-center">
<p class="text-subtitle-1">How much would you like to use?</p>
</v-col>
</v-row>
<v-row
class="mt-n12"
>
<v-col
cols="12"
>
<v-checkbox
class=""
hide-details
v-model="useAllMyCredit"
color="#68007d"
label="I'd like to use all my credit"
></v-checkbox>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-container>
</v-card>
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
>Solution :
Try to put the class on the col instead of the checkbox :
<v-row>
<v-col class='d-flex justify-center'>
<v-checkbox></v-checkbox>
</v-col>
</v-row>