[Vuejs]-Align text in card to the bottom right of the image

by

0👍

✅

a) flexbox only works on a parent-child basis. You have a few properties aimed at the flex container (the parent) and a few usable on the flex items (the children). Obviously, any flex item can also be a flex container for its own children. For a more in-depth coverage of how flexbox works I recommend this read.

b) whenever something doesn’t seem to work right, regardless of the UI framework/library you use, have a look at their examples. Find one that’s close to what you’re after and simply copy-paste the markup and then start playing.

In your case, you don’t need <v-container>, <v-layout> or any of those complications inside <v-img>.

It’s way simpler:

<v-card>
  <v-img>
    <v-card-title />
  </v-img>
  <v-card-text />
  <v-card-actions />
</v-card>

Here’s a working example:

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
#app {
  margin: 20px 0;
}
<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-card class="mx-auto" max-width="400">
      <v-img class="white--text align-end"            
             src="https://images.pexels.com/photos/3992952/pexels-photo-3992952.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
        <v-card-title class="justify-end">Lorem, ipsum dolor.</v-card-title>
      </v-img>
      <v-card-text>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio doloribus tempore distinctio dolorem blanditiis iusto cupiditate accusantium provident consectetur quisquam repellat quo aliquam quia placeat incidunt natus eveniet ipsa ipsum aut, animi suscipit
        alias sequi. Sapiente totam omnis molestiae adipisci.
      </v-card-text>
      <v-card-actions>
        <v-btn large color="primary">Action</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</div>

In order to make the title bottom right aligned I used:

  • .align-end on <v-img> // bottom align
  • .justify-end on <v-card-title> // align right

Note: justify-end class aligns element contents to the right with two conditions: the item has to be a flex container (a.k.a: have display: flex
– true in the case of <v-card-title>s) and has to have flex-direction: row (which is the implicit/default value).
If it’s not a flex container, you have to use text-right class (or, in plain CSS: text-align: right).
Based on flex-direction value (row|row-reverse|column|column-reverse) any of the following would align to the right, accordingly: justify-end|justify-start|align-end|align-start.

So, rather than trying to remember: “justify-end aligns to the right” (which is only true in 1 out of 4 possible cases), visualize flexbox as having a direction. What’s left/right of that direction is controlled by align-*. What’s front/back on that direction is controlled by justify-*.

Leave a comment