Vuetify 3迁移：rail模式下v-list-item文字如何在图标下方居中？

针对你迁移到Vuetify3时遇到的布局问题，可通过以下调整解决：

核心修改思路 #

Vuetify3的列表组件布局逻辑和v2存在差异，需借助内置的flex布局工具类，强制内容垂直排列并居中对齐。

修改后的代码示例 #

<v-navigation-drawer
  clipped
  rail
  rail-width="110"
  permanent="true"
>
<!-- left items -->
  <v-list>
    <v-list-item
      v-for="(item, i) in items"
      :key="i"
      :to="item.to"
      router
      exact
      active-class="highlighted"
      :class="item.path === $route.path ? 'highlighted' : ''"
      class="justify-center"
    >
        <v-list-item-content class="d-flex flex-column align-center">
            <v-icon>{{ item.icon }}</v-icon>
            <v-list-item-subtitle v-text="item.title" class="text-center"/>
        </v-list-item-content>
    </v-list-item>
  </v-list>
</v-navigation-drawer>
<v-main>
  <v-container class="pl-8 ml-0" fluid>
    <Nuxt />
  </v-container>
</v-main>

关键调整点说明 #

• 给<v-list-item>添加justify-center类，确保整个列表项内容在水平方向居中
• 给<v-list-item-content>添加d-flex flex-column align-center类：
  • d-flex启用flex布局
  • flex-column让子元素（图标、文本）垂直排列
  • align-center让子元素在水平方向居中
• 给<v-list-item-subtitle>添加text-center类，确保文本自身居中对齐

若需微调间距或字体大小，可添加自定义CSS：

.v-list-item-subtitle {
  margin-top: 4px; /* 调整图标与文本的间距 */
  font-size: 0.75rem; /* 根据需求调整文本尺寸 */
}

内容的提问来源于stack exchange，提问作者Pigna