양식이 중앙에 정렬되지 않았습니다(수직 중앙/중앙).

양식이 중앙에 정렬되지 않았습니다(수직 중앙/중앙).

아래 코드가 있으며, v-flex에 align-center-custify-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>

화면 출력은 다음과 같습니다.수직 중앙이 아닌 맨 위에 있습니다.

추가 세부 정보와 함께 업데이트됨:

여기 제 앱이 있습니다.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>

제발 이것 좀 도와주세요.

를 추가하는 것은 어떨까요?fill-height에게v-container그리고.align-center에게v-layout:

<v-container fill-height>
  <v-layout row wrap align-center>

를 삭제합니다.<main>태그

또한 태그로 감쌀 필요가 없어졌습니다.

그럼, 변경해당신의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>

JSFiddle 모 js입니다.

유감스럽게도 데모 링크 없이는 도와드릴 수 없습니다.하지만, 당신의 문제는 당신의 컬럼 사이즈 특성 - xs8 때문인 것 같습니다.또는 잘못된 플렉스 속성을 사용하고 있을 수도 있습니다.align-items: center; 를 사용해 보십시오.

언급URL : https://stackoverflow.com/questions/48969510/the-form-is-not-center-aligned-vertically-centered-middle