CODEWITHSUNDEEP
flexboxvuejs2vuetify.js
ttncrch
ttncrch

Reputation: 7253

vuetify center items into v-flex

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>

Upvotes: 44

Views: 170892

Answers (4)

Diego Chavez
Diego Chavez

Reputation: 21

It works for me using the v-layout in the following way:

<v-layout justify-center>
  <div class="text-center ma-5">
    <v-card-actions>
      <v-btn primary>
        <span>LogIn</span>
      </v-btn>
    </v-card-actions>
  </div>
</v-layout>

vuetify's v-layout allows you to modify all the elements inside the layout.

Upvotes: 0

Abdulaziz
Abdulaziz

Reputation: 217

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

Upvotes: 20

Traxo
Traxo

Reputation: 19002

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

Upvotes: 97

jundialwan
jundialwan

Reputation: 37

v-flex does not have a display flex! Inspect v-flex in your browser and you will find out it is just a simple block div.

So, you should override it with display: flex in your HTML or CSS to make it work with justify-content.

Upvotes: -8

Related Questions