Vuetify v-img align right inside v-col

user_3936931 0
Viewed 6536

I thought that would be so easy, but I cannot achieve the image alignment to the right... see this codepen:

https://codepen.io/slayerbleast/pen/KKVGgKO

The code:

<v-content>
  <v-container>
    <v-row 
           align="right" 
           align-content="right" 
           class="text-right"
           >
      <v-col class="text-right">
        <v-img 
               max-height="200px" 
               max-width="200px"
               src="https://picsum.photos/200/300"
               align="right"
               ></v-img>
      </v-col>
    </v-row>  
  </v-container>
</v-content>

How can I align the image to the right inside the v-col

vuetify.js vue.js alignment image
2 Answers

You can simply use the .ml-auto utility class from vuetify. Without having to write your own css.
Here are the changes I made.

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-row>
          <v-col>
            <v-img 
                   max-height="200px" 
                   max-width="200px"
                   src="https://picsum.photos/200/300"
                   class="ml-auto"
                   ></v-img>
          </v-col>
        </v-row>  
      </v-container>
    </v-content>
  </v-app>
</div>

It seems to be working, here's a working clone of your pen

user_82159020

Since the img is background-image, so there's assumed lack of details in wrapping image in <div> container.

.text-right .v-image {
  display: inline-block;
}

will do

user_61660420
Related