web-dev-qa-db-fra.com

vuetify les éléments centraux dans v-flex

J'essaie de centrer un <v-btn> dans un <v-flex>. Puisque <v-flex> est une flexbox div, j’utilise justify-center qui est transformé en

justify-content: center

Puisque ma direction est horizontale, mon bouton devrait être centré mais ce n’est pas le cas. Voici le codepen qui reproduit mon problème.

https://codepen.io/anon/pen/ZXLzex

Je veux inscrire le bouton pour être centré à l'intérieur de la div (v-flex).

Voici le code complet:

 <v-card>
    <v-card-text >
          <v-text-field label="Email"></v-text-field>
          <v-text-field label="Password"></v-text-field>
    </v-card-text>

    <v-card-actions>
        <v-layout row>
          <v-flex justify-center>
            <v-btn primary>
              Signup
            </v-btn>
          </v-flex>
        </v-layout>
    </v-card-actions>
  </v-card>
flexboxvuejs2vuetify.js
24
Epitouille

bouton de bouclage à l'intérieur de <div class="text-xs-center">

<div class="text-xs-center">
  <v-btn primary>
    Signup
  </v-btn>
</div>

Dev l'utilise dans ses exemples.

Pour centrer les boutons dans v-card-actions, nous pouvons ajouter class="justify-center":

<v-card-actions class="justify-center">
  <v-btn>
    Signup
  </v-btn>
</v-card-actions>

Codepen

Pour plus d'exemples concernant le centrage, voir ici

43
Traxo
<v-layout justify-center>
  <v-card-actions>
    <v-btn primary>
     <span>SignUp</span>
    </v-btn>`enter code here`
  </v-card-actions>
</v-layout>
6
Abdulaziz