CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.js
hansCristian3799
hansCristian3799

Reputation: 53

how to align item horizontally in vuetify

i've been stuck for hours just to align an item vertically and horizontally in v-card. this image below is what i currently have, i just have to align the item vertically but i dont know how. can anyone help me? thanks in advance

enter image description here

My code :

<div class="pt-3">
        <v-card class="pa-3">
            <v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
                <v-col class="fill-height" height="500">
                    <v-card class="text-center grey" height="100%">
                        <div align="center" justify="center">
                            <v-icon>mdi-camera</v-icon>
                            <h3>Upload</h3>
                        </div>
                    </v-card>
                </v-col>
            </v-row>
        </v-card>
    </div>

computed: {
    deviceHeight(){
        return this.$vuetify.breakpoint.height;
    },
    deviceWidth(){
        return this.$vuetify.breakpoint.width;
    },
},

Upvotes: 2

Views: 6924

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362760

The align and justify props are used for some Vuetify components, but they won't work on a native HTML div. Instead use the appropriate classes on the v-card...

     <v-card class="text-center grey d-flex flex-column align-center justify-center" height="100%">
             <div>
                 <v-icon>mdi-camera</v-icon>
                 <h3>Upload</h3>
             </div>
     </v-card>

Demo

Upvotes: 1

Satyam Pathak
Satyam Pathak

Reputation: 6932

v-row behaves as the flex-container and all the props like justify or align or any flex container property will work to it only. Just change ur div to v-row. Althought there is one problem with that is v-row have some negative margin which you can rid off by using no-gutters

<div class="pt-3">
            <v-card class="pa-3">
                <v-row align="center" justify="center" v-bind:style="{ height: deviceHeight * 0.6 + 'px',}">
                    <v-col class="fill-height" height="500">
                        <v-card class="text-center grey" height="100%">
                            <v-row no-gutters align="center" justify="center">
                                <v-icon>mdi-camera</v-icon>
                                <h3>Upload</h3>
                            </div>
                        </v-card>
                    </v-col>
                </v-row>
            </v-card>
        </div>

Upvotes: 1

Related Questions