Center V-switch Inside A V-flex

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

Solution 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>

Solution 2:

Vuetify version 1.5:

You can do that using the <v-layout row wrap justify-center> instead of <v-layout column>. you also need to change md10 to md12 so the v-switch appears in the center:

<v-layout row wrap justify-center>
        <v-flex class="red" xs12 md12>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
        </v-flex>
        <v-flex xs12 md2>
                <v-switch
                    @click="SomeFunction"
                    label="Some Label Name"
                    color="black"
                    value="secondary"
                    hide-details
                ></v-switch>
        </v-flex>
    </v-layout>

Here is a Codepen.

Update: Vuetify version 2.0.0:

<v-row wrap justify="center">
   <v-col cols="12" xs="12" md="12" class="red">
       ...
   </v-col>
   <v-col cols="12" xs="12" md="12">
        ...
   </v-col>
</v-row>

Solution 3:

Apply "justify-center" to the "v-layout" tag, which should be found prior to the "v-flex" tag.

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

EDIT: just saw your codepen in the comments. Assuming you're trying to keep the text aligned to the left while moving the v-switch to the center, try using two different v-layout tags for each v-flex tag.

<v-layout column>
    <v-flex xs12 md10>
        TEXT
    </v-flex>
</v-layout>
<v-layout column align-center>
    <v-flex xs12 md2 >
        <v-switch
            @click="SomeFunction"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </v-flex>
</v-layout>