我有一个下面的代码,我在v-flex上定义了 align-center justify-center 。但我仍然看到登录表单不是垂直居中的屏幕。我的代码有什么问题?
<template>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm8 offset-sm2 align-center justify-center>
<v-card class="elevation-12">
<v-toolbar dark color="primary">
<v-toolbar-title>Sign In</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-container>
<form>
<v-layout row>
<v-flex xs12>
<v-text-field
name="emailid"
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
</v-text-field>
</v-flex>
</v-layout>
<v-layout row xs12>
<v-flex>
<v-btn flat block color="primary"
@click.prevent="validateBeforeSubmit">
Sign In
</v-btn>
</v-flex>
<v-flex>
<v-btn flat block
@click.prevent="clear">
Clear
</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
这是屏幕输出。请注意,它位于顶部,而不是垂直中间。
更新了其他详细信息:
这是我的App.vue内容。
<template>
<v-app>
<app-navbar></app-navbar>
<main>
<router-view/>
</main>
</v-app>
</template>
Navigation.vue(app-navbar)文件位于
之下<template>
<div v-if="!userLoggedIn">
<v-navigation-drawer absolute temporary v-model='sideNav'>
<v-toolbar flat>
<v-list>
<v-list-tile>
<v-list-tile-title class='title'>
Talent Search
</v-list-tile-title>
</v-list-tile>
</v-list>
</v-toolbar>
<v-divider></v-divider>
<v-list class='pt-0'>
<v-list-tile v-for='item in menuItems' :key='item.title' :to='item.link'>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar dense dark color="menus">
<v-toolbar-side-icon @click.stop='sideNav = !sideNav' class='hidden-sm-and-up '>
</v-toolbar-side-icon>
<v-toolbar-title>
<router-link to='/' tag='span' style='cursor: pointer'>Talent Search</router-link>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class='hidden-xs-only'>
<v-btn flat v-for='item in menuItems' :key='item.title' :to='item.link'>
<v-icon left dark>{{ item.icon }}</v-icon>
{{ item.title }}
</v-btn>
</v-toolbar-items>
</v-toolbar>
</div>
<div v-else-if="userLoggedIn">
<v-toolbar dense>
<v-toolbar-side-icon @click.stop='userLoggedSideNav = !userLoggedSideNav'>
</v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn
flat
@click="onLogout">
<v-icon left dark>exit_to_app</v-icon>
Sign Out
</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer mb-0 absolute temporary v-model='userLoggedSideNav'>
<v-layout row align-center>
<v-flex justify-center>
<some_image>
</v-flex>
</v-layout>
<v-list class="pt-2 mb-0 pb-0" dense>
<v-divider></v-divider>
<v-subheader>Profile</v-subheader>
<v-list-tile v-for="item in items" :key="item.title" :to='item.link' ripple>
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
</div>
</template>
请帮我解决这个问题。
答案 0 :(得分:1)
如何将fill-height
添加到v-container
,将align-center
添加到v-layout
:
<v-container fill-height>
<v-layout row wrap align-center>
<main>
代码另外,v-content
no longer needs to be wrapped in a main
tag。
所以改变你的App.vue
:
<template>
<v-app>
<app-navbar></app-navbar>
<main>
<router-view/>
</main>
</v-app>
</template>
要
<template>
<v-app>
<app-navbar></app-navbar>
<router-view/>
</v-app>
</template>
答案 1 :(得分:0)
不幸的是,如果没有演示链接,我将无法为您提供帮助。但是,如果我猜你的问题可能是由于你的colum size attrs - xs8。或者您可能正在使用不正确的flex属性。尝试使用align-items:center;