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?

https://codepen.io/anon/pen/qvebJB is it what you're trying to achieve ? — Toodoo, Mar 28 '19 at 16:22
@saitam is [this](https://codepen.io/djshan/pen/QoeEjW) what you want? — DjSh, Mar 28 '19 at 17:04
@saitam fyi my solution is the same as DjSh, so what was wrong with it ? — Toodoo, Mar 29 '19 at 08:46

score 5 · Answer 1 · answered Mar 28 '19 at 16:54

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>

DjSh · Accepted Answer · 2019-09-26T13:09:25.923

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>

Coko · Answer 3 · 2019-03-28T16:53:27.817

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>

Center v-switch inside a v-flex

3 Answers3

Linked