Trying to streamline the v-card-actions on my Vuetify v-cards. My aim is to center the test button within the v-card and position it above the like and share "footer" buttons. I want the like and share footer buttons to be at the bottom of the v-card with space between them.
I attempted to place the "footer" using
<v-flex class="d-flex justify-space-between mx-4">...</v-flex>The picture illustrates my desired layout where both the footer and Test buttons are placed at the bottom of the card. Despite my attempts, either the test button did not center properly or the division between the footer buttons got disrupted. https://i.sstatic.net/8AomX.jpg This snippet represents the code that has yielded the best visual result thus far:
<v-layout row wrap>
<v-flex xs12 sm6 md4 lg3 v-for="project in filteredProjects" :key="project.title">
<v-card class="ma-3" hover height="95%" >
<v-card-text>
...
</v-card-text>
<v-card-actions>
<v-col class="text-center">
<v-btn class="green accent-4 white--text">
<span class="">Test</span>
</v-btn>
</v-col>
</v-card-actions>
<v-flex class="d-flex justify-space-between mx-4">
<div>
<v-btn icon>
<v-icon>thumb_up</v-icon>
</v-btn>
<span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.upvoteCount }}</span>
<v-btn icon>
<v-icon>thumb_down</v-icon>
</v-btn>
<span class="text-md-subtitle-2 black--text font-weight-bold ">{{ project.downvoteCount }}</span>
</div>
<div>
<v-btn icon>
<v-icon>share</v-icon>
</v-btn>
<span class="text-md-subtitle-2 black--text font-weight-bold">Teilen</span>
</div>
</v-flex>
</v-card>
</v-flex>
</v-layout>
Your suggestions are greatly appreciated! Warm regards.