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-flexxs12md2 ><divclass="text-xs-center"><v-switchclass="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-layoutrowwrapjustify-center><v-flexclass="red"xs12md12>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br></v-flex><v-flexxs12md2><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-rowwrapjustify="center"><v-colcols="12"xs="12"md="12"class="red">
       ...
   </v-col><v-colcols="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-layoutjustify-center><v-flexxs12md2 ><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-layoutcolumn><v-flexxs12md10>
        TEXT
    </v-flex></v-layout><v-layoutcolumnalign-center><v-flexxs12md2 ><v-switch
            @click="SomeFunction"label="Some Label Name"color="black"value="secondary"hide-details
        ></v-switch></v-flex></v-layout>