라디오 그룹 Vuetify 중앙 집중화

라디오 그룹 Vuetify 중앙 집중화

중앙 집중화할 수 없다.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'를 설정하여 태그를 만들고 구분하려고 했지만 도움이 되지 않았다.이 레이아웃(라디오 버튼)을 내 폼 가운데로 하고 싶다.

사실, 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/vuetify@1.4.0/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/vuetify@1.4.0/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>

명명된 클래스 추가flex-center라디오 버튼 그룹을 감싸고 CSS에 다음 규칙을 추가하는 div 요소에:

.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/vuetify@1.4.0/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/vuetify@1.4.0/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>

참조URL: https://stackoverflow.com/questions/54460468/centralize-radio-group-vuetify