vuetify center items into v-flex

Question

I'm trying to center a <v-btn> into a <v-flex>. Since <v-flex> is a flexbox div, I use justify-center that is transformed into

justify-content: center 

Since my direction is horizontal, my button should be center aligned but it's not. Here is the codepen that reproduce my problem.

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

I want to signup the button to be centered inside the div (v-flex).

Here is the full code:

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

Answer 1

wrap button inside <div class="text-xs-center">

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

Dev uses it in his examples.

---

For centering buttons in v-card-actions we can add class="justify-center" (note in v2 class is text-center (so without xs):

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

Codepen

---

For more examples with regards to centering see here

Answer 2

<v-layout justify-center>   <v-card-actions>     <v-btn primary>      <span>SignUp</span>     </v-btn>   </v-card-actions> </v-layout>