Vuetify grid system wont justify horizontal position of elements

I am trying to build a scoreboard and right now i got two cards for each team. In each of those cards shall be two rows: One for the teams logo and one for the current score. My problem right now is that the alignment of the logo and score wont work. Both are still on left. Through trial and error i got this right now but i am stuck. Can anybody spot my mistake?

Any help is appreciated!

Template:

<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

You can add below classes to v-col tags:

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

Advertisement

Answer