Home>

I'm using Nuxt and I'm using Vuetify.Js as its UI framework.
As shown in the image picture below, I want to align the elements from the center,
I wrote the code, but justify = "center" align-content = "center" in v-row is not working.

<template>
    
    <v-card-actions>
      <v-row justify = "center" align-content = "center">
        <v-col cols = "4">
          <v-btn>​​aaa</v-btn>
        </v-col>
        <v-col cols = "4">
          <v-btn>​​bbb</v-btn>
        </v-col>
        <v-col cols = "4">
          <v-btn>​​bbb</v-btn>
        </v-col>
      </v-row>
    </v-card-actions>
    
</template>


The result of executing this code is as follows.

I wanted to center the three button elements, but they are still to the left.
Would you please tell me more about how to make the style work and center it?

  • Answer # 1

    justify = "center" align-content = "center" in v-row is not working.

    This itself seems to be working, but in itv-colAt the innerv-btnMay be because it is not centered. You can apply css directly to align, but I think that it will be as follows to align using Vuetify.

    <template>
        
          <v-card-actions>
          <v-row justify = "center" align-content = "center">
              <v-col cols = "4">
                  <v-btn>​​aaa</v-btn>
              </v-col>
              <v-col cols = "4">
                  <v-btn>​​aaa</v-btn>
              </v-col>
              <v-col cols = "4">
                  <v-btn>​​aaa</v-btn>
              </v-col>
          </v-row>
          </v-card-actions>
        
    </template>

    The flex utility used in the above example is documented below.

    https://vuetifyjs.com/en/styles/flex/