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で
|
1 |
class="justify-center" |
を定義すればテキストやイメージ、ボタンを中央揃えにすることができます。
ぜひ覚えておきましょう。
終わりに
今回はVuetifyのv-cardコンポーネントの中でテキストやイメージをセンター寄せにする方法についてご紹介いたしました。