Vuetify-卡片上的行居中復選框

我無法將 Vuetify 復選框在卡片上的一行中居中。

我已經嘗試過text-center并將這些歸類為復選框：

>

我嘗試了以下 CSS hack，但沒有成功：

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

為了完整起見，這是此模板上的所有代碼：

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

uj5u.com熱心網友回復：

嘗試將類放在 col 而不是 checkbox 上：

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

標籤：Vue.js Vuetify.js

上一篇：for回圈中的Vue動態表單元素

下一篇：在VUE中從模態視圖獲取值到主視圖