Vuetify 1.5 to 2: How to center radio buttons in v-radio-group with prop 'row'?-CodePudding

I'm upgrading a project's Vuetify version from 1.5 to 2.6. In version 1.5, the original code is as follows:

<v-layout column align-center justify-center>
  <v-flex>
    <p >朝代选择:</p>
    <v-radio-group v-model="dynastySelected" row>
      <v-radio
        v-for="(dynasty, index) in dynastys"
        :key="index"
        :label="dynasty"
        :value="dynasty"
      ></v-radio>
    </v-radio-group>
  </v-flex>
</v-layout>

style effect of this: original style effect

I have tried to change something:

<v-row justify="center">
  <v-col>
    <p >朝代选择：</p>
    <v-radio-group v-model="dynastySelected" row>
      <v-radio
        v-for="(dynasty, index) in dynastys"
        :key="index"
        :label="dynasty"
        :value="dynasty"
      ></v-radio>
    </v-radio-group>
  </v-col>
</v-row>

but the style current style effect is different from the original one and I don't know how to make it look the same as the original.

Thanks!

CodePudding user response：

After your comment i think i have a better understand, tell me if not.

But i understand in the both image everything have the same width but the content is align to the left on the first image. In the second image is center and it's what you want to do.

With have multiple solution depend on what it's inside, the simplest is on the v-col add the css:

  display: flex;
  flex-direction: column;
  justify-content: center;

You can wrap your content inside v-col in a div if it's cause trouble on your display.