[Vuejs]-How to center the p element vertically in v-card on Vuetify?

0πŸ‘

βœ…

The following is enough to center the second div in the middle of the height.

<template>
  <v-container fluid>
    <v-row>
    </v-row>
    <v-row justify="center" no-gutters>
      <v-col cols="5">
        <v-card outlined height="80vh" max-height="80vh" class="pa-8 d-flex flex-column">
          <v-row class="flex-grow-0">
            <v-col>
              <v-file-input accept="image/png, image/jpeg" chips label="Choose an image(JPG or PNG)" outlined
                prepend-icon="image">
              </v-file-input>
            </v-col>
          </v-row>
          <v-row>
            <v-col class="d-flex flex-column justify-center">
              <p class="text-center text-h4 grey--text">
                Image Preview
              </p>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
      <v-col align-self="center" cols="2">
      </v-col>
      <v-col cols="5" align-self="center">
      </v-col>
    </v-row>
  </v-container>
</template>

This is how it looks

enter image description here

The additional margin under the text comes from that one

enter image description here


Here is a really nice + short cheatsheet regarding flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

πŸ‘€kissu

-2πŸ‘

Use display flex property:

display: flex;
align-items: center;
πŸ‘€Zillion Dev

Leave a comment