The code displayed below showcases the structure of a container with various elements inside:
<v-container fluid>
<!-- page title -->
<v-row>
…
</v-row>
<!-- body -->
<v-row justify="center" no-gutters>
<!-- input -->
<v-col cols="5">
<v-card outlined height="80vh" max-height="80vh" class="pa-8">
<!-- image upload -->
<v-row>
<v-col>
<v-file-input
accept="image/png, image/jpeg"
chips
label="Choose an image(JPG or PNG)"
outlined
prepend-icon="image"
show-size
v-model="image"
@change="previewImage"
@click:clear="clearAll"
></v-file-input>
</v-col>
</v-row>
<!-- image preview -->
<v-row>
<v-col>
<p v-if="no_image" class="text-center text-h4 grey--text">
Image Preview
</p>
<v-img v-else :src="imageUrl" contain max-height="55vh"></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
<!-- button -->
<v-col align-self="center" cols="2">
…
</v-col>
<!-- output -->
<v-col cols="5" align-self="center">
…
</v-col>
</v-row>
</v-container>
This is just a markup example, and the current style can be viewed https://i.sstatic.net/pk6m7.png.
However, it seems that there is an issue with centering the "Image Preview" text vertically within the v-card element. Various attempts to use properties like align="center", class="align-center", align-self="center" on different elements have proven unsuccessful so far.
What would be the appropriate solution for achieving this layout?