'Vuetify - Center checkbox in row on card

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>


Sources

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

Source: Stack Overflow

Solution Source