Vuetify 网格系统不会证明元素的水平位置

Question

我正在尝试建立一个记分牌，现在我为每个团队准备了两张卡片。在每张卡片中应有两行：一行用于球队标志，另一行用于当前比分。我现在的问题是徽标和分数的对齐不起作用。两者都还在左边。通过反复试验，我现在得到了这个，但我被卡住了。有人能发现我的错误吗？

感谢任何帮助！

模板：

<template>
  <v-container fluid>
    <v-row class="ma-5" dense align="center" justify="center">
      <v-col cols="5">
        <v-card elevation="10" outlined>
          <v-container>
            <v-row align="center" justify="center" no-gutters>
              <v-col>
                <v-img
                    src="@/assets/home.png"
                    width="65%"
                />
              </v-col>
            </v-row>
            <v-row justify="center" align="center" no-gutters>
              <v-col>
                <span style="font-size: 16rem">
                  {{ this.homeScore }}
                </span>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
      <v-col cols="2">
        <v-img
            src="@/assets/vs.png"
        />
      </v-col>
      <v-col cols="5">
        <v-card elevation="10" outlined class="">
          <v-container>
            <v-row align="center" justify="center" no-gutters>
              <v-col>
                <v-img
                    src="@/assets/away.png"
                    width="65%"
                />
              </v-col>
            </v-row>
            <v-row justify="center" align="center" no-gutters>
              <v-col>
                <span style="font-size: 16rem">
                  {{ this.awayScore }}
                </span>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

Answer 1

您可以添加以下类到 v-col 标签：

<v-col class="d-flex justify-center">
...
</v-col>

Vuetify 网格系统不会证明元素的水平位置

Vuetify grid system wont justify horizontal position of elements

javascript

vue.js

vuetify.js