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

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!

vue.jsvuejs2nuxt.jsvuetify.jsjavaspring-bootoracle12c


Solution 1:[1]

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
  })
</script>

Solution 2:[2]

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"
    >

Solution 3:[3]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 krock
Solution 3 dotNET

Related Questions