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>

Traxo · Accepted Answer · 2020-01-13T08:02:12.853

94

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

edited Jan 13 '20 at 08:02

answered Sep 25 '17 at 13:25

Traxo

18,464
4
75
87

Thanks that work. But why ?! text-xs-center does a `text-align: center`. Why it doesn't work with flexbox ? – Titouan56 Sep 25 '17 at 13:47
@Epitouille If you put `d-flex` (`display:flex`) on wrapper, then it will include `flex: 1, 1 auto` on button because of included css: `.d-flex > * { ... flex: 1 1 auto; }`, which will make it full width – Traxo Sep 25 '17 at 16:35
i had to add scoped style `.v-card__actions { display: inline; }` for properly centering the button on the `v-card-actions` element beside this proposed solution. – Rakibul Haq Dec 03 '18 at 11:34
1

@RakibulHaq We can use ``. See edit. – Traxo Dec 03 '18 at 11:41
1

@Traxo yeah right! i have got rid of that scoped `css` and added **only** the justify-center to the `v-card-actions` and it **works** . thanks man! – Rakibul Haq Dec 03 '18 at 11:47

score 20 · Answer 2 · edited Apr 08 '21 at 15:33

20

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

edited Apr 08 '21 at 15:33

acdcjunior

132,397
37
331
304

answered Dec 17 '17 at 19:57

Abdulaziz

217
2
5

12

Please explain how this code works and how it's different than the other answers. – Leopold Joy Dec 17 '17 at 20:15

score 0 · Answer 3 · answered Dec 22 '22 at 17:23

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.

score -7 · Answer 4 · answered Sep 29 '17 at 19:45

-7

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.

answered Sep 29 '17 at 19:45

jundialwan

39
2

vuetify center items into v-flex

4 Answers4

Linked