Vuetify - 卡上一行的中心复选框

Question

我无法在卡片上将 Vuetify 复选框连续居中。

我试过 text-center 并且这些分类在复选框上：

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

我尝试了以下 CSS 技巧，但没有成功：

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

Answer 1

尝试将 class 放在列而不是复选框上：

<v-row>
    <v-col class='d-flex justify-center'>
        <v-checkbox></v-checkbox>
   </v-col>
</v-row>

Vuetify - 卡上一行的中心复选框

Vuetify - Center checkbox in row on card

vue.js

vuetify.js