小编Web*_*eak的帖子

中心v-工具栏标题

我想将标题放在工具栏组件的中央。这是它的样子:

在此处输入图片说明

这是我的组件:

<div>
    <v-navigation-drawer dark app clipped temporary v-model="menu" class="teal white--text">
        <v-list >
            <v-list-tile
               v-for="(item,index) in items" :key="index" @click="$router.push(item.path)" v-if="item.value">
                <v-list-tile-action>
                    <v-icon>{{ item.icon }}</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
                    <v-list-tile-title>{{ item.label }}</v-list-tile-title>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>
    </v-navigation-drawer>
    <v-toolbar dense dark color="teal" class="pa-0">
        <router-link to="/">
            <v-btn class="mx-0" icon>
                <i class="material-icons">home</i>
            </v-btn>
        </router-link>
        <v-toolbar-title class="white--text">{{title}}</v-toolbar-title>
        <v-layout align-center justify-end>
            <v-toolbar-items>
                <router-link to="/parametres">
                    <v-btn class="mx-0" icon>
                        <i class="material-icons">settings</i>
                    </v-btn>
                </router-link>
                <v-btn v-on:click="Logout()" class="mx-0" icon>
                    <i class="material-icons">exit_to_app</i>
                </v-btn>
            </v-toolbar-items>
        </v-layout>
    </v-toolbar>
</div>
Run Code Online (Sandbox Code Playgroud)

我无法相对于工具栏正确居中。也许我应该使用flex属性?顺便说一下,我正在使用Vuetify.js进行材质设计。

如果您能帮助我,我将不胜感激。我对flex和vuejs完全陌生。

css flexbox vue.js vuetify.js

2
推荐指数
3
解决办法
1716
查看次数

标签 统计

css ×1

flexbox ×1

vue.js ×1

vuetify.js ×1