CODEWITHSUNDEEP
vue.jsvuetify.js
Andor Németh
Andor Németh

Reputation: 499

How to align v-cols horizontally in vuetify?

I would like to align all seven of those buttons centered. As you can see the last one is a bit off compared to the first one.

enter image description here

How do I achieve this? I've already tried justify="center" and justify="space-around"

Here is my code: 

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

Here is the toggle-button component:

<template>
  <v-btn
    outlined
    depressed
    :class="button ? 'primary white--text' : 'outlined'"
    @click="button ? (button = false) : (button = true)"
    v-model="button"
    icon
  >
    {{ $t("roomservice.weekdays." + weekday) }}
  </v-btn>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: ["button", "weekday"]
};
</script>

Upvotes: 4

Views: 14348

Answers (1)

Ja9ad335h
Ja9ad335h

Reputation: 5075

v-col is not a flex and contents inside (toggle-button) are justified to start form left.

you can fix this by adding class="d-flex justify-center" on 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>

Upvotes: 19

Related Questions