title: How to align v-cols horizontally in vuetify?
body: <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/bz26A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bz26A.png" alt="enter image description here"></a></p>
  
  <p>How do I achieve this? 
  I've already tried <code>justify="center"</code> and <code>justify="space-around"</code></p>
  
  <p>Here is my code: </p>
  
  <pre><code>  &lt;v-row no-gutters justify="space-around"&gt;
      &lt;v-col v-for="(item, index) in buttons" :key="index"&gt;
        &lt;toggle-button
          :weekday="item.weekday"
          :button="item.state"
        &gt;&lt;/toggle-button&gt;
      &lt;/v-col&gt;
    &lt;/v-row&gt;
  </code></pre>
  
  <p>Here is the <code>toggle-button</code> component:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-btn
      outlined
      depressed
      :class="button ? 'primary white--text' : 'outlined'"
      @click="button ? (button = false) : (button = true)"
      v-model="button"
      icon
    &gt;
      {{ $t("roomservice.weekdays." + weekday) }}
    &lt;/v-btn&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {};
    },
    props: ["button", "weekday"]
  };
  &lt;/script&gt;
  </code></pre>