CODEWITHSUNDEEP
csslayoutvuetify.js
batsz
batsz

Reputation: 65

How to center v-btn on v-card and put it on cards edge?

I want to center button relatively to v-card element and then put it on its bottom edge.

By now I have two partial solutions that can do these things, but separately.

Following style puts my v-btn on v-card edge properly:

.middle {
   position: absolute;
}

On edge:

image

And following style centers it in v-card:

.middle {
   display: block;
   margin: auto;
}

Centered:

image

However when combined button is not centered anymore. How can I combine these two effects with CSS?

Below my v-card I have vuetify timeline element and just want to make nice button for timeline elements addition on the cross of its origin and title :)

Upvotes: 1

Views: 278

Answers (1)

t-MURO
t-MURO

Reputation: 671

add :style="{left: '50%', transform:'translateX(-50%)'}" to the <v-btn>

Upvotes: 1

Related Questions