Vue cli version @ 5.0.6 | Vuetify version: [email protected]
I have been utilizing Vue.js and Vuetify for some time now, and I can't shake the feeling that not all Vue.js/Vuetify components default to centered alignment. I recently initialized a new project without making any adjustments to formatting or theming configurations.
Below is the code for a basic login page:
<template>
<div>
<v-icon
x-large
style="font-size: 125px"
> mdi-account </v-icon>
<!-- login form card -->
<v-card max-width="525px">
<v-container>
<v-form ref="login">
<v-card-title>
<h1> Login </h1>
</v-card-title>
<v-text-field
label="Email"
outlined
/>
<v-text-field
label="Passwrd"
outlined
/>
<v-spacer></v-spacer>
<v-btn> Login </v-btn>
</v-form>
</v-container>
</v-card>
</div>
</template>
<script>
export default {
//
}
</script>
<style>
</style>
The icon is already centered on the page without any additional styling, but when I adjust the size of my card, it resizes and shifts to the left side of the page.