Vuetifyのv-cardコンポーネントの中でテキストやイメージをセンター寄せにする方法

今回はVuetifyのv-cardコンポーネントの中でテキストやイメージをセンター寄せにする方法についてご紹介いたします。



Vuetifyのv-cardコンポーネントの中でテキストやイメージをセンター寄せにする方法

あるとき、Vuetifyのv-cardコンポーネントでtext-align: center;を適用しようとしたところ、少しハマったので備忘録として残しておきます。

結構前に試したため、記憶が定かではないですが、普通にv-card上でtext-align: center;をつけても、中央揃えにはなりませんでした。

結論から言うと、v-cardの中でv-card-textのコンポーネントを使えば中央揃えにすることが可能です。
v-card-textのコンポーネントにはデフォルトで中央揃えにするCSSがついているのですね。
https://stackoverflow.com/questions/55574599/how-to-align-the-contents-to-the-center-of-the-v-card-component-in-vuetify#

もしくは上記に書かれている通り、v-card-titleとv-card-actionsで

を定義すればテキストやイメージ、ボタンを中央揃えにすることができます。

ぜひ覚えておきましょう。

終わりに

今回はVuetifyのv-cardコンポーネントの中でテキストやイメージをセンター寄せにする方法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Veutify

Posted by ちこ