Vue.js 如何在vuetify中水平对齐v-Col？

我想把所有七个按钮都对准中心。正如你所看到的，最后一个和第一个相比有点差

我如何做到这一点？ 我已经尝试了

justify=“center”

和

justify=“space around”

这是我的密码：

  <v-row no-gutters justify="space-around">
    <v-col v-for="(item, index) in buttons" :key="index">
      <toggle-button
        :weekday="item.weekday"
        :button="item.state"
      ></toggle-button>
    </v-col>
  </v-row>

---

v-col

不是弹性体，内部内容（切换按钮）从左开始对齐

您可以通过在

v-col

<v-row no-gutters justify="space-around">
    <v-col 
        class="d-flex justify-center"
        v-for="(item, index) in buttons" 
        :key="index">
        <toggle-button
            :weekday="item.weekday"
            :button="item.state"
        ></toggle-button>
    </v-col>
</v-row>

<v-row no-gutters justify="space-around">
    <v-col 
        class="d-flex justify-center"
        v-for="(item, index) in buttons" 
        :key="index">
        <toggle-button
            :weekday="item.weekday"
            :button="item.state"
        ></toggle-button>
    </v-col>
</v-row>