我无法垂直对齐居中的项目#vuetify

Question

我已经找了3个小时，找不到我的问题的解决方案，不知道我做错了什么，我只想垂直对齐这3个v-flex元素

<template>
  <div class="home">
    <v-container fluid class="pa-0">
      <v-img :src="require('@/assets/images/background.jpg')" max-height="100%">
        <v-layout align-center column>
          <v-flex class="mb-2">
            <span class="primary--text text-uppercase display-3 font-weight-thin">List</span>
            <span class="white--text text-uppercase display-3 font-weight-thin">Series</span>
          </v-flex>
          <v-flex class="mb-4">
            <h4 class="subheading grey--text">Follow the series you've been watching or are still watching!</h4>
          </v-flex>
          <v-flex>
            <v-btn color="primary" depressed flat outline to="/add">
              go to add
            </v-btn>
          </v-flex>
        </v-layout>
      </v-img>
    </v-container>  
  </div>
</template>

Answer 1

一种解决方案是将图像移出container。然后在container上使用style="height: 100%;" align-center d-flex，使其填充图像区域，并在中间垂直显示内容。此外，您可能想要考虑图像max-height="100vh"，以防止在较小的屏幕上滚动。

​

new Vue({
  el: '#app' 
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

<div id="app">
  <template>
    <div class="home">
      <v-img src="https://images.unsplash.com/photo-1562696482-77619dec0ae7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" max-height="100%">
      <v-container style="height: 100%;" align-center d-flex fluid class="pa-0">
          <v-layout align-center column>
            <v-flex class="mb-2">
              <span class="primary--text text-uppercase display-3 font-weight-thin">List</span>
              <span class="white--text text-uppercase display-3 font-weight-thin">Series</span>
            </v-flex>
            <v-flex class="mb-4">
              <h4 class="subheading grey--text">Follow the series you've been watching or are still watching!</h4>
            </v-flex>
            <v-flex>
              <v-btn color="primary" depressed flat outline to="/add">
                go to add
              </v-btn>
            </v-flex>
          </v-layout>
        </v-img>
      </v-container>  
    </div>
  </template>
</div>

​