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>

우선 제목에 붙였다.
class="mx-auto"는
가로 방향의 마진을 자동으로 조정해 주는 것입니다.

그리고 메뉴에 붙인
class="ml-n15"로
왼쪽의 마진을 15 깎았습니다.
n15의 'n'은 부정적인 의미이며,
지금 어떤 마진에서 그 뒤에 붙인 숫자만큼 깎을 수 있는 것입니다.

n15의 "15"부분을 각자 조정하면 아래와 같이 잘 타이틀을 중심으로 가져올 수 있습니다.