How to align content inside of a component in Vuetify?

Question

I have this image:

As you can see, there are four transparent buttons inside of it, Home, Offers, About and Contact.

How can I align them to the bottom of the image instead of the top?

Here is my code:

<v-img src="@/assets/banner/webbanner.png">
  <v-container>
    <v-row align="center" justify="center">
      <v-btn
        color="transparent"
        class="mx-2 white--text"
        depressed
        width="200"
        v-for="(button, index) in viewButtons"
        :key="index"
      >
        {{ button.name }}
      </v-btn>
    </v-row>
  </v-container>
</v-img>

Answer 1

I would pull the container out of the v-imge. and then give it a flex class

<div class="container d-flex flex-column">
  <v-img src="@/assets/banner/webbanner.png" class="imageContent" />
  <v-container>
    <v-row" justify="space-between">
      <v-btn
        color="transparent"
        class="mx-2 white--text"
        depressed
        width="200"
        v-for="(button, index) in viewButtons"
        :key="index"
      >
        {{ button.name }}
      </v-btn>
    </v-row>
  </v-container>
</div>

I hven't tested this, but flexbox will help a lot https://yoksel.github.io/flex-cheatsheet/

it should get you started and pointed in the right direction.

Answer 2

You can modify v-container styles by accessing its staticClass: 'container'

So just add

<v-container class="container-scoped">...</...>
.container-scoped{ position: absolute; bottom: 0px }

to your component styles.

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.1.10/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-row align="center" justify="center">
      <v-img
        src="https://picsum.photos/id/11/500/300"
        lazy-src="https://picsum.photos/id/11/10/6"
        aspect-ratio="1"
        class="grey lighten-2"
        max-width="250"
        max-height="150"
      >
        <v-container
          style="position:absolute;bottom:0px"
          
        >
          <v-row align="center" justify="space-around">
            <div class="white--text mx-2">btn</div>
            <div class="white--text mx-2">btn</div>
          </v-row>
        </v-container>
      </v-img>
    </v-row>
  </v-app>
</div>