Center v-switch inside a v-flex

Question

I would like to center the v-switch element inside a v-flex horizontally and I already tried this here: vuetify center items into v-flex, but it seems not to work for the v-switch element.

Whether I wrap it inside a div class like this:

<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>

Or I use the class directly inside the v-flex:

<v-flex xs12 md2 text-xs-center>

It doesn't work. Also using other classes like class="justify-center" doesn't work.

Here is a codepen, so you can see the problem

What is the right way to do it?

Answer 1

Add class="switch-center" in v-switch tag and write below CSS will resolve your issue. Thanks

.switch-center {
  display: flex;
  justify-content: center;
}

.switch-center {
  display: flex;
  justify-content: center;
}

<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            class="switch-center"
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>