Vuetify - create a card with a button centered vertically and horizontally

Question

I'm trying to create a card in Vuetify, within a Nuxt project running on Vue 2, which consists of a background image, and a single button centered both horizontally and vertically.

I've tried using d-flex, as well as v-row and v-col, but in the first case it's centered vertically but not horizontally, and in the second case it's centered horizontally but not vertically.

But as far as I can tell, I've written my code exactly as specified in Vuetify's documentation.

I've tested this on Chrome and Firefox and gotten the same result in each.

Here is my Nuxt page:

<template>
  <div>
    <v-card >
      <v-img
        class="d-flex justify-center align-center"
        width="600"
        height="600"
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      >
        <v-btn
          icon
          width="300"
          height="300"
        >
          <v-icon color="white" size="300">mdi-emoticon-confused-outline</v-icon>
        </v-btn>
      </v-img>
    </v-card>

    <br >

    <v-card >
      <v-img
        width="600"
        height="600"
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      >
        <v-container>
          <v-row justify="center" align="center">
            <v-col align="center">
              <v-btn
                icon
                width="300"
                height="300"
              >
                <v-icon color="white" size="300">mdi-emoticon-confused-outline</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-img>
    </v-card>
  </div>
</template>

I'm aware that I could probably fix this by fiddling with paddings and margins, but I'd rather figure out how to get it to work just by using Vuetify functionality, so that I can use this as a learning experience to learn how to use Vuetify correctly.

Thanks in advance for any help!

I think you will need to add some CSS not sure if vuetify have anything native to do that. Here is one option to look at: https://stackoverflow.com/a/19461564/460557 — Jorge Campos, Feb 04 '22 at 18:09

Nikola Pavicevic · Answer 1 · 2022-02-04T18:34:34.140

You can set .v-responsive__content class :

.v-responsive__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-card 
          max-width="600"
          max-height="600" 
          class="d-flex">
      <v-img
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      >
        <v-btn 
          icon
          width="300"
          height="300"
        >
          <v-icon color="white" size="300">mdi-emoticon-confused-outline</v-icon>
        </v-btn>
      </v-img>
    </v-card>
    <br >
    <v-card 
      max-width="600"
      max-height="600" 
      class="d-flex">
      <v-img
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      >
        <v-container>
          <v-row justify="center" align="center">
            <v-col align="center">
              <v-btn
                icon
                width="300"
                height="300"
              >
                <v-icon color="white" size="300">mdi-emoticon-confused-outline</v-icon>
              </v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-img>
    </v-card>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
  })
</script>

score 0 · Answer 2 · answered Feb 06 '22 at 21:14

I was actually able to get this to work without any custom CSS - it turned out my problem was that I need to change this:

<v-card >
      <v-img
        width="600"
        height="600"
        src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      >

to this:

<v-card
      class="d-flex justify-center align-center"
      img="https://cdn.vuetifyjs.com/images/cards/cooking.png"
      width="600"
      height="600"
    >

score 0 · Answer 3 · answered May 02 '22 at 00:35

Building on top of @Nikola's answer, the following worked for me in Vuetify 3 (beta):

<v-card style="height: 100%">
  <v-card-text class="d-flex align-center justify-center h-100">
    <v-btn color="primary" @click="console.log('yey')"> Confirm </v-btn>
  </v-card-text>
</v-card>

It centers the button horizontally and vertically in the card.

Vuetify - create a card with a button centered vertically and horizontally

3 Answers3