Align text to different directions in a Vuetify slider - vue.js

Question

I have the following slider
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-carousel
cycle
height="600"
hide-delimiter-background
show-arrows
next-icon
prev-icon
>
<v-carousel-item
:src=`https://picsum.photos/seed/picsum/536/354`
>
<v-row align-end>
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
I want for example align the text of the first slide at the bottom-center of the image, I've heard that Vuetify uses flexbox but I'm not sure how it works and I don't even understand the examples from the documentation, so I would like some help. What I want to know the most is where to place the align or justify, I really don't get it.

Answer 1

Try to add the following classes d-flex flex-column justify-end align-center fill-height to the v-row component :
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<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/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-carousel cycle height="600" hide-delimiter-background show-arrows next-icon prev-icon>
<v-carousel-item :src=`https://picsum.photos/seed/picsum/536/354`>
<v-row class="d-flex flex-column justify-end align-center fill-height">
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>