如何在Vuetify项目中实现v-card组件内的图片居中显示？

问题根因 #

你当前代码中v-card内部的嵌套布局未设置居中规则，且v-img绑定了ml-3左外边距类，会强制让图片向右偏移，导致无法居中。

修复方案 #

推荐直接简化v-card内部布局，使用Vuetify内置的flex工具类实现居中，修改后的代码如下：

<v-main>
  <v-container fill-height fluid>
    <v-row>
      <v-col ref="vcol" v-for="item in items" :key="item.id" cols="3">
        <!-- 仅修改v-card内部内容即可 -->
        <v-card class="mb-2 d-flex align-center justify-center" height="200" width="200">
          <v-img
            :src="'http://localhost:1337' + item.picture.url"
            max-height="180"
            max-width="180"
            contain
          ></v-img>
        </v-card>

        <div class="center">
          <br />
          <label for="name"
            >Name:
            <td>{{ item.name }}</td>
          </label>
          <br />
          <label for="points"
            >Points:
            <td>{{ item.points }}</td></label
          >
          <br />
          <label for="amount"
            >Amount:
            <td>{{ item.amount }}</td>
          </label>
        </div>

        <br />
        <div class="center">
        <v-btn @click="redeemReward(item)" :disabled="item.amount === 0">Redeem Reward</v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</v-main>

相关属性说明 #

• d-flex：将v-card设置为flex弹性容器
• align-center：让容器内子元素垂直居中
• justify-center：让容器内子元素水平居中
• contain：保证图片按原比例缩放，不会超出v-card边界，max宽高设置为180是为了避免图片顶到卡片边框

如果要保留你原有v-row+v-col的嵌套结构，修改以下部分即可生效：

<v-card class="mb-2" height="200" width="200">
  <v-row justify="center" align="center" style="height: 100%">
    <v-col>
      <v-img
        :src="'http://localhost:1337' + item.picture.url"
        max-height="180"
        max-width="180"
        contain
      ></v-img>
    </v-col>
  </v-row>
</v-card>

内容的提问来源于stack exchange，提问作者Thanyatorn First