Vuetify.js: how to display text on the top right of a v-card' v-img component?

user_3329664 0
Viewed 10048

In Vuetify.js, I want to display a one word text on the right side of a v-card image:

<v-card>
   <v-img 
        rc="https://cdn.vuetifyjs.com/images/cards/desert.jpg"
        aspect-ratio="2.75">
        <span class="my-span">
          Info
        </span>
   </v-img>
</v-card>

But this is the result I get:

enter image description here

Even if my-span says margin-right:0;:

.my-span {
  background-color:blue;
  color:white;
  font-weight:bold;
  margin-right:0;
}

How to fix this?

Codepen.

vuetify.js vue.js css javascript
1 Answers

Use float: right; in your CSS:

new Vue({
  el: '#app'
})
.my-span {
  background-color: blue;
  color: white;
  font-weight: bold;
  margin-right: 0;
  float: right;
}
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.3.5/dist/vuetify.min.css" />
<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75">
            <span class="my-span">
              Info
            </span>
          </v-img>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

user_70531900
Related