在v-flex中居中放置v-switch [英] Center v-switch inside a v-flex

问题描述

我想将v-switch元素水平放置在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 element.

是否将其包装在这样的div类中:

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>

或者我直接在v-flex内部使用该类:

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

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

它不起作用.也不能使用其他类，例如class="justify-center".

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

这是一个 codepen ，因此您可以看到问题所在

Here is a codepen, so you can see the problem

正确的方法是什么?

推荐答案

Vuetify 1.5版:

您可以使用<v-layout row wrap justify-center>而不是<v-layout column>来实现.您还需要将md10更改为md12，以便v-switch出现在中间:

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>

这是 Codepen .

更新: Vuetify版本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>

这篇关于在v-flex中居中放置v-switch的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！