v菜单居中图像和图标

时间:2018-08-16 08:16:16

标签: vue.js vuejs2 vuetify.js

我正在尝试将v菜单用于移动设备。但是,即使使用auto,项目(图标,文本,头像)也不会居中。我尝试了多种自定义CSS解决方案,但没有任何效果。

v菜单

enter image description here

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>

0 个答案:

没有答案