[英]Center v-toolbar-title
我想在我的工具欄組件中居中我的標題。 這是它的樣子:
這是我的組件:
<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>
我無法將其相對於工具欄正確居中。 也許我應該使用 flex 屬性? 順便說一下,我正在使用 Vuetify.js 進行材料設計。
如果你能幫助我,我將不勝感激。 我對 flex 和 vuejs 完全陌生。
在標題前添加一個v-spacer
<v-spacer></v-spacer>
<v-toolbar-title class="white--text">{{title}}</v-toolbar-title>
<v-toolbar dense dark color="teal" class="pa-0">
<v-row>
<v-col cols="2">
...
</v-col>
<v-col class="d-flex justify-space-around">
<v-toolbar-title class="white--text">{{title}}</v-toolbar-title>
</v-col>
<v-col cols="2" class="d-flex justify-end">
...
</v-col>
</v-toolbar>
就我而言,我只有<v-toolbar-title>
,所以我不得不將<v-spacer />
放在它的右側和左側:
<v-toolbar>
<v-spacer />
<v-toolbar-title>
Some title text
</v-toolbar-title>
<v-spacer />
</v-toolbar>
我在v-toolbar-title標簽中添加了flex text-center類。 這些課程以標題為中心。
<v-toolbar-title class="flex text-center">
<h4>Centered Title</h4>
</v-toolbar-title>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.