[Vuejs]-Two elements aren't centered in mobile view

by

1👍

✅

You could fix that using the helper class align-center :

  <v-card elevation="3" 
          class="d-flex flex-column flex-sm-row justify-center pt-2 pb-2 align-center">
👤Boussadjra Brahim

2👍

It’s because you’re using column flex direction on small devices. Both justify-center and align-center works differently when using column direction.

justify-center

  • Horizontal in row direction and Vertical on column direction.

align-center

  • Vertical in row direction and Horizontal in column direction.

Conclusion

Just add align-center to the v-card element and you’re good to go.

<v-card elevation="3" class="d-flex flex-column flex-sm-row justify-center align-center pt-2 pb-2">
👤Maverick Fabroa

Leave a comment