[Vuejs]-I cant vertically align items in center #vuetify

by

0👍

✅

One solution would be to move the image out of the container. Then use style="height: 100%;" align-center d-flex on container to make it fill image area and display contents vertically in the middle. Also you might want to consider image max-height="100vh" to prevent scrolling on smaller screens.

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>

Leave a comment