Vuetifyで上下中央寄せにする方法

今回はVuetifyで上下中央寄せにする方法についてご紹介していきます。



Vuetifyで上下中央寄せにする方法

結論から言います。
どのようなUIを配置するかによりますが、サンプルとして下記のようなソースコードを書けば上下左右揃えの配置が可能です。

上記の結果は下記の画像の通りです。
Vuetifyで上下中央寄せにする方法

v-rowについたalign-contentはそのままCSSのalign-contentに変換されます。
v-rowのalign-contentにcenterを指定することで、CSSとして

がつくこととなります。

また、v-rowやv-colにalignを渡すことで、CSSでいうalign-itemsに変換されます。
alignをcenterとすることで、CSSとして

がつくこととなります。

基本的なことですが覚えておきましょう。

終わりに

今回はVuetifyで上下中央寄せにする方法についてご紹介いたしました。

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

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






Veutify

Posted by ちこ