集中无线电组 Vuetify

Question

我无法集中化

v-radio-group

。这是我得到的：

<v-container grid-list-md text-xs-center>
  <v-form ref="form>

    <div v-if="question.question_type == 'YESNO' ">
          <v-radio-group v-model="answer">
            <v-layout>

              <v-flex>
                <v-radio
                value="Yes"
                label="Yes"
                ></v-radio>
              </v-flex>

              <v-flex>
                <v-radio
                value="No"
                label="No"
                ></v-radio>
              </v-flex>

            </v-layout>
          </v-radio-group>
        </div>   

  </v-form>
</v-container>

我尝试将类“text-xs-center”和“justify-center”设置为 form 和 div 标签，但没有帮助。我希望这个布局（单选按钮）位于我的表单中间。

Answer 1

将名为

flex-center

的类添加到包装单选按钮组的 div 元素，并将以下规则添加到 CSS 中：

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      question: {
        question_type: 'YESNO'
      },
      answer: ''
    }
  }

})

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app" data-app>
  <v-container grid-list-md text-xs-center>
    <v-form ref="form">

      <div v-if="question.question_type == 'YESNO'" class="flex-center">
        <v-radio-group v-model="answer">
          <v-layout>

            <v-flex>
              <v-radio value="Yes" label="Yes"></v-radio>
            </v-flex>

            <v-flex>
              <v-radio value="No" label="No"></v-radio>
            </v-flex>

          </v-layout>
        </v-radio-group>
      </div>

    </v-form>
  </v-container>



</div>

Answer 2

实际上，Vuetify 的做法似乎是这样的：

<v-form>
  <v-radio-group row v-model="answer" class="justify-center">
    <v-radio value="Yes" label="Yes"></v-radio>
    <v-radio value="No" label="No"></v-radio>
  </v-radio-group>
</v-form>

所以

v-radio-group

添加

row

道具，然后将按钮与

justify-center

对齐。

new Vue({
  el: '#app',
  data: () => ({
    answer: null
  })
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-container grid-list-md text-xs-center>
          <v-form>
            <v-radio-group row v-model="answer" class="justify-center">
              <v-radio value="Yes" label="Yes"></v-radio>
              <v-radio value="No" label="No"></v-radio>
            </v-radio-group>
          </v-form>
        </v-container>
      </v-container>
    </v-content>
  </v-app>
</div>

Answer 3

对于下面的 vuetify 3.7+ 似乎对我有用。在这里发帖，因为它可能会对标记以下的人有所帮助。

<v-radio-group
        inline
        class="d-flex justify-center"
    >
        <v-radio
            label="Yes"
            color="success"
            value="Yes"
        />
        <v-radio
            label="No"
            color="error"
            value="No"
        />
</v-radio-group>