I cannot center a Vuetify checkbox in a row on a card.

I've tried text-center and these classed on the checkbox:

>

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 >
    <v-row>
      <v-col cols="12">
        <v-card 
          >
          <v-container>
            <v-row>
              <v-col cols="12" >
                <p >Your current balance is:</p>
              </v-col>
            </v-row>
            <v-row >
              <v-col cols="12" >
                <p >{{ returnShop.country_currency_symbol }}30.00</p>
              </v-col>
            </v-row>
            <v-divider></v-divider>
            <v-row >
              <v-col cols="12" >
                <p >How much would you like to use?</p>
              </v-col>
            </v-row>

            <v-row 
              
            >
              <v-col
                cols="12"
              >
                <v-checkbox
                  
                  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 >
        Customize</h1>
      </v-col>
    </v-row>

    <v-row 
      
    >
      <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 >
                    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 
                  
                >
                  <h2>You have store credit!</h2>
                </v-card-title>
              
              <v-container >
                <v-row>
                  <v-col cols="12">
                    <v-card 
                      >
                      <v-container>
                        <v-row>
                          <v-col cols="12" >
                            <p >Your current balance is:</p>
                          </v-col>
                        </v-row>
                        <v-row >
                          <v-col cols="12" >
                            <p >{{ returnShop.country_currency_symbol }}30.00</p>
                          </v-col>
                        </v-row>
                        <v-divider></v-divider>
                        <v-row >
                          <v-col cols="12" >
                            <p >How much would you like to use?</p>
                          </v-col>
                        </v-row>

                        <v-row 
                          
                        >
                          <v-col
                            cols="12"
                          >
                            <v-checkbox
                              
                              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>

CodePudding user response：

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>