Align text to different directions in a Vuetify slider

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<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>

<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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<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>

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