More than 5 years have passed since last update.

vuetifyでcard内のavatarを中心に持ってくる

Posted at 2018-11-05

card内でavatarを使う

avatarをv-card内で使うと、画像が中心に持ってくるのが難しい

<v-card>
  <v-avatar
    size="50%"
  >
  <img src="画像データ">
  </v-avatar>
</v-card>

text-xs-center や justify-center をavatarや画像につけたり
maring: 0 auto;をしてみても中心に持ってこれない

<v-layout> で justify-center を使うと画像を中心に持ってくることができる

<v-card>
  <v-layout justify-center>
   <v-avatar
    size="50%
   >
    <img src="画像データ">
   </v-avatar>
  </v-layout>
</v-card>