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

Posted 2023-02-22

【中文标题】我无法垂直对齐中心的项目#vuetify

【英文标题】：I cant vertically align items in center #vuetify

【发布时间】：2019-11-20 22:32:27

【问题描述】：

我一直在寻找 3 个小时，无法找到解决我的问题的方法，不知道我做错了什么 我想要的只是垂直对齐这 3 个 v-flex 元素

<template>
  <div class="home">
    <v-container fluid class="pa-0">
      <v-img :src="require('@/assets/images/background.jpg')" max->
        <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>

【参考方案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->
      <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>