Лучший способ центрировать v-карту по горизонтали и вертикали с помощью vuetify - PullRequest
Новая
       36

Лучший способ центрировать v-карту по горизонтали и вертикали с помощью vuetify

0 голосов
/ 06 августа 2020

В настоящее время я открываю страницу входа на свой веб-сайт, но не могу правильно отцентрировать свою v-карту по горизонтали и вертикали. Лучший результат, который у меня есть: 

<template>
    <v-layout align-center justify-center column fill-height>
        <v-flex row align-center>
            <v-card>
                <v-toolbar color="primary" >
                    <v-toolbar-title>Login</v-toolbar-title>
                </v-toolbar>
                <v-text-field label="Email" v-model="email"/>
                <v-text-field label="Password" v-model="password" />
                <v-footer>
                    <div>
                        <v-btn color="primary" v-on:click="login()">Login</v-btn>
                        <p>I don't have account: <a>Register</a></p>
                    </div>
                </v-footer>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            email: "",
            password: ""
        }
    },
    methods: {
        login() {
            console.log('login')
        }
    }
}
</script>

Но при этом текстовые потоки сжимаются, и я не могу их увеличить. Заранее благодарим за помощь.

1 Ответ

1 голос
/ 06 августа 2020

Попробуйте это. 

 <v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
            Hello I am center to vertically using "align-center".
          </v-flex>
        </v-layout>
      </v-container>

или 

<v-container fill-height fluid>
  <v-row align="center"
      justify="center">
      <v-col></v-col>
  </v-row>
</v-container>
...