Я не могу выровнять элементы по центру - PullRequest
Новая
       32

Я не могу выровнять элементы по центру

0 голосов
/ 11 июля 2019

Я искал 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>

1 Ответ

0 голосов
/ 11 июля 2019

Одним из решений было бы переместить изображение из container.Затем используйте style="height: 100%;" align-center d-flex на container, чтобы заполнить область изображения и отобразить содержимое вертикально посередине.Также вы можете рассмотреть изображение 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>
...