CODEWITHSUNDEEP
vuejs2vuetify.js
kid_plama
kid_plama

Reputation: 249

Center floating button in vuetify

I am trying to center the "BUY NOW" button to be in the middle of the screen, but I can't get it to work.

I have created 3 flex items and added the button to the middle flex. However this didn't work either.

I tried using justify-space-around and justify-space-between but no luck.

<v-flex xs12>
  <v-layout row >
    <v-flex ></v-flex>
    <v-flex pt-2>
      <v-card>
          <v-btn
            color="pink"
            dark
            absolute
            top
          >
            BUY NOW
          </v-btn>
      </v-card>
    </v-flex>
    <v-flex ></v-flex>
  </v-layout>
</v-flex>

Here is a link for codepen

Please help.

I need the button to be position exactly in the middle like this:

enter image description here

Upvotes: 5

Views: 10317

Answers (3)

Samantha
Samantha

Reputation: 849

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

I moved the button into another flexbox above the flexbox with the caption. text-xs-center moves the text horizontally and align-center moves the text vertically. You can see my changes in the codepen :)

<v-flex text-xs-center align-center>
    <v-btn
        color="pink"
        dark
        absolute
    > buy now
</v-flex>

Upvotes: 1

Cong Nguyen
Cong Nguyen

Reputation: 3455

Add some css to Button:

<v-btn
  color="pink"
  dark
  absolute
  top
  :style="{left: '50%', transform:'translateX(-50%)'}"
>

Upvotes: 10

ittus
ittus

Reputation: 22403

You can use class text-xs-center to center button horizontally.

<v-card class="text-xs-center">
    <v-btn
      color="pink"
      dark
      absolute
      top
    > buy now </v-btn>
</v-card>

Upvotes: 0

Related Questions