Center v-toolbar-title

Question

I would like to center my title in my toolbar component. This is what it's looke like :

And this is my component :

<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>

I can not center it properly in relation to the toolbar. Maybe should i use flex properties ? By the way i'm using Vuetify.js for the material design.

If you can help me I'll be grateful. I'm totally new with flex and vuejs.

Solution 1

Add a v-spacer before the title

<v-spacer></v-spacer>
<v-toolbar-title class="white--text">{{title}}</v-toolbar-title>

A more complex alternative would be to use the grid layout with flex spacing

<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>

Solution 2

In my case, I had only <v-toolbar-title>, so I had to put <v-spacer /> both on the right and left of it:

<v-toolbar>
  <v-spacer />
  <v-toolbar-title>
    Some title text
  </v-toolbar-title>
  <v-spacer />
</v-toolbar>

Solution 3

I added flex text-center classes to the v-toolbar-title tag. These classes centered the title.

<v-toolbar-title class="flex text-center">
      <h4>Centered Title</h4>
 </v-toolbar-title>

Comments

[D Durham]

Technically <v-spacer /> does not center... if offsets based on the length of content to the left and or right.

[A_L]

This works great but where did you get class="flex text-center" from? all the docs I have seen use d-flex but class="d-flex text-center" does not work.