如何水平对齐图像？ (Vuetify.js)答案

【问题标题】：How to align images horizontal? (Vuetify.js)如何水平对齐图像？ (Vuetify.js)
【发布时间】：2021-07-01 12:56:11
【问题描述】：

它看起来像什么，我想要什么：

我的模板代码：

  <v-row>
    <v-col md="6" v-bind:key="el._id" v-for="el in els">
      <v-card max-width="280" tile elevation="0" outlined>{{ text }}</v-card>
        <v-img class="my-10" height="100" width="200" contain :src="src"></v-img>
    </v-col>
  </v-row>

我尝试了所有在互联网和文档中找到的元素：

class="justify-start" 
align="start"
justify="start"

和：

style="justify-content: start !important;
  align-content: flex-start !important;
  align-items: flex-start !important;
  align-self: flex-start !important;
  justify-self: flex-start !important;"

但没有任何效果。

【问题讨论】：

您是否尝试在您的 v-row 中添加 no-gutters ？
它不起作用:(
如果在 v-col 中添加类似 cols="6" 的内容会怎样？
@Xanthous 然后什么都没有发生，因为cols="6" 对我来说就像md="6" 所以它是一样的
您能否从您的组件中添加更多代码到您的问题中？我看不出这不起作用的原因，你有容器或类似的东西吗？

标签： html css vue.js templates vuetify.js

【解决方案1】：

问题实际上在于 Vuetify 的 contain 功能。
它使图像成为background-image 和background-position: center center。
要对其进行自定义，您可以在您的 css 中定位类 .v-image__image--contain 并将其设为 background-position: left center !important;。

这是一个例子：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.v-image__image--contain {
  background-position: left center !important;
}

<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-row>
    <v-col md="6">
      <v-card max-width="280" tile elevation="0" outlined>Test</v-card>
        <v-img class="my-10" height="100" width="200" contain src="https://dummyimage.com/600x400/000/fff" style="background-position: left center;"></v-img>
    </v-col>
    <v-col md="6">
      <v-card max-width="280" tile elevation="0" outlined>Test</v-card>
        <v-img class="my-10" height="100" width="200" contain src="https://dummyimage.com/600x400/000/fff"></v-img>
    </v-col>
  </v-row>
</div>

【讨论】：