时间戳

首页 > 解决方案 > 如何水平对齐图像？(Vuetify.js)

html - 如何水平对齐图像？(Vuetify.js)

问题描述

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

在此处输入图像描述 我的模板代码：

  <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;"

但没有任何效果。

标签： htmlcssvue.jstemplatesvuetify.js

解决方案

问题实际上contain在于 Vuetify 的功能。
它使图像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>

推荐阅读