vue.js - v-menu 居中图像和图标

Question

我正在尝试将 v-menu 用于移动设备。然而，项目（图标、文本、头像）没有居中，即使使用auto. 我尝试了多种自定义 css 解决方案，但没有任何效果。

v菜单

v-菜单代码：

<v-menu offset-y auto>
    <v-btn slot="activator" icon
                >
                    <v-icon>fas fa-bars</v-icon>
                </v-btn>
                <v-list>
                    <!-- Home -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/home" class="nav-text">
                                <a> Home </a>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- About us -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/aboutus" class="nav-text">
                                <a> about us </a>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- Messages -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <div class="alignMessageIcon">
                                <router-link to="/messages" class="nav-text">
                                    <v-icon size="22" color="grey darken-2">far fa-comment-alt</v-icon>
                                </router-link>
                            </div>
                        </v-list-tile-title>
                    </v-list-tile>

                    <!-- Profile -->
                    <v-list-tile>
                        <v-list-tile-title>
                            <router-link to="/profile" class="nav-text">
                                <v-avatar size="27">
                                    <img
                                            :src="currentUser.profile_img"
                                            :alt='currentUser.firstname'
                                    >
                                </v-avatar>
                            </router-link>
                        </v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>

标签： vue.jsvuejs2vuetify.js