CODEWITHSUNDEEP
vue.jsvuejs2nuxt.jsvuetify.js
krock
krock

Reputation: 513

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!

Upvotes: 3

Views: 2385

Answers (3)

dotNET
dotNET

Reputation: 35450

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.

Upvotes: 0

krock
krock

Reputation: 513

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

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23500

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>

Upvotes: 3

Related Questions