How do I center vertically a v-list in v-navigation-drawer mini-variant in vuetify?

Question

I have a navigation drawer with mini-variant and expand-on-hover-option

I want to center my v-list vertically in the drawer

This is my code :

<v-navigation-drawer permanent color="primary" dark app expand-on-hover>
  <v-list-item link :to="'/'" class="mx-n2">
    <v-list-item-avatar>
      <v-img :src="require(`@/assets/icons/logo-mini.svg`)"/>
    </v-list-item-avatar>
    <v-list-item-title>{{title}}</v-list-item-title>
  </v-list-item>
  <v-list
    nav
    style="padding: 0"
    class="d-flex flex-column align-self-center"
  >
    <v-list-item
      v-for="page in pages"
      :key="page.label"
      link
      :to="page.link"
    >
      <v-list-item-avatar class="mr-4">
        <v-img :src="require(`@/assets/icons/${page.icon}`)"/>
      </v-list-item-avatar>
      <v-list-item-title class="text-no-wrap">
        {{ page.label }}
      </v-list-item-title>
    </v-list-item>
  </v-list>

Emre Arabaci Emre Arabaci · Accepted Answer · 2021-01-13T00:15:58

I've had this problem too. I solved this problem. I'm typing the height value and I use align-center, justify-center and fill-height* classes in <v-list-item>

<v-list height="..vh">
    <v-list-item class="px-0 align-center justify-center fill-height">

I use it in my project as follows:

<v-navigation-drawer permanent expand-on-hover>
            <v-list height="90vh">
                <v-list-item class="px-0 align-center justify-center fill-height">
                    <v-list-item-content>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                        <v-list-item link>
                            <v-list-item-icon>
                                <v-icon>mdi-home</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>Lorem ipsum</v-list-item-title>
                        </v-list-item>
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>

How do I center vertically a v-list in v-navigation-drawer mini-variant in vuetify?

1 Answers