Vuetify.js でcolのアライメントを整えてセンター揃えにしたい。

Nuxtを使用しておりまして、そのUIフレームワークとして、Vuetify.Jsを使用しています。
下記のイメージ写真のように、要素をセンターよりに揃えたいと思い、
コードを作成しましたが、v-row内のjustify="center" align-content="center"が効いておりません。

Vue.js
1<template>
2    <div>
3      <v-card-actions>
4        <v-row justify="center" align-content="center">
5          <v-col cols="4">
6            <v-btn>aaa</v-btn>
7          </v-col>
8          <v-col cols="4">
9            <v-btn>bbb</v-btn>
10          </v-col>
11          <v-col cols="4">
12            <v-btn>bbb</v-btn>
13          </v-col>
14        </v-row>
15      </v-card-actions>
16    </div>
17  </template>

このコードの実行結果は下記のようになりました。

3つのボタン要素を中央揃えにしたいと思っていたのですが、現状左に寄ったままとなっています。
どうしたらstyleを効かせて中央寄せにするのか、詳しい方ご教示いただけませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

v-row内のjustify="center" align-content="center"が効いておりません。

こちら自体は効いているようですが、その中の v-col 内で v-btn がセンタリングされていないのが原因かと思われます。直接cssを適用して揃えることもできますが、Vuetifyを使って揃えるには次のようになるかと思います。

html
1<template>
2    <div>
3        <v-card-actions>
4        <v-row justify="center" align-content="center">
5            <v-col cols="4" class="d-flex justify-center">
6                <v-btn>aaa</v-btn>
7            </v-col>
8            <v-col cols="4" class="d-flex justify-center">
9                <v-btn>aaa</v-btn>
10            </v-col>
11            <v-col cols="4" class="d-flex justify-center">
12                <v-btn>aaa</v-btn>
13            </v-col>
14        </v-row>
15        </v-card-actions>
16    </div>
17</template>