Vuetifyでタイトルを中心に持ってきたい

Vuetifyを使ってヘッダーを作成している時に困ったこと。

メニューバーなどが無く、ただタイトルがあるだけであれば以下のような記述でタイトルを中心に持ってくることができると思いますが、

Top.vue

<template>
  <v-app>
    <v-app-bar>
      <v-spacer />
      <Title />
      <v-spacer />
    </v-app-bar>
  </v-app>
</template>

一番右側などにメニューバーやアイコンがある場合、
その分横にずれてしまい、タイトルが中心にこなくなってしまいます。

なのでclassでmarginを指定することで中心にくるよう調整しました。

Top.vue

<template>
  <v-app>
    <v-app-bar>
      <Title class="mx-auto"/>
      <Menu class="ml-n15"/>  //数字(15)の部分は各自調整してください
    </v-app-bar>
  </v-app>
</template>

まずTitleにつけた
class="mx-auto"は
横方向のマージンを自動で調整してくれるものです。

そしてMenuにつけた
class="ml-n15"で
左側のマージンを15削りました。
n15の「n」というのはネガティブの意味で、
今あるマージンからその後につけた数字分だけ削ることができるものです。

n15の「15」の部分を各自調整すると以下のように上手くタイトルを中心に持ってくることができます。