2
votes

Commutateur central en V à l'intérieur d'un V-Flex

Je voudrais centrer l'élément v-switch horizontalement dans un v-flex et j'ai déjà essayé ceci ici: vuetify center items into v-flex , mais cela ne semble pas fonctionner pour le v-switch

Si je l'enveloppe dans une classe div comme celle-ci:

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

Ou j'utilise la classe directement dans le v-flex :

Cela ne fonctionne pas. L'utilisation d'autres classes comme class = "justify-center" ne fonctionne pas.

Voici un codepen , afin que vous puissiez voir le problème p>

Quelle est la bonne façon de procéder?

html css vue.js vuetify.js flexbox

5 commentaires

codepen.io/anon/pen/qvebJB est-ce ce que vous essayez d'accomplir?

non, j'en ai besoin ici: codepen.io/saitam1/pen/aMeNzb

@saitam est-ce cela ce que vous voulez?

@saitam il y a aussi une faute de frappe dans votre codepen: sx12

@saitam fyi ma solution est la même que DjSh, alors qu'est-ce qui n'allait pas?

3 Réponses :

0
votes

Appliquez "justify-center" à la balise "v-layout", qui devrait être trouvée avant la balise "v-flex".

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

EDIT: vient de voir votre codepen dans les commentaires. En supposant que vous essayez de garder le texte aligné à gauche tout en déplaçant le commutateur v vers le centre, essayez d'utiliser deux balises v-layout différentes pour chaque balise v-flex.

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

0 commentaires

4
votes

Ajouter class = "switch-center" dans la balise v-switch et écrire ci-dessous CSS résoudra votre problème. Merci

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

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

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

0 commentaires

2
votes

Vuetify version 1.5:

Vous pouvez le faire en utilisant au lieu de . vous devez également changer md10 en md12 pour que le v-switch apparaisse au centre:

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

0 commentaires