I cannot centralize v-radio-group
. Here's what I got:
<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>
I tried setting classes 'text-xs-center' and 'justify-center' to form and div tags but it didn't help. I want this layout (radio buttons) to be in the middle of my form.
Add class named flex-center
to your div element that wraps radio buttons group and add the following rule to your CSS :
.flex-center {
display: flex;
flex-direction: column;
align-items: center;
}
Full example :
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>