问Vuetify卡上行中央复选框

EN

class="d-flex justify-center align-center">

.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%;
}

  <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>

<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>