有没有办法通过忽略Vuetify中的导航图标来居中应用栏标题？答案

【问题标题】：Is there a way to center app bar title by ignoring nav icon in Vuetify?有没有办法通过忽略Vuetify中的导航图标来居中应用栏标题？
【发布时间】：2021-10-30 22:38:38
【问题描述】：

我正在使用 vuetify 开发一个带有 nuxt.js 的网站。我的问题是，在应用栏上，我有一个导航图标和应用栏标题。该图标将出现在比大屏幕更小的屏幕上。无论是图标显示还是隐藏，我都希望标题居中。但是，当显示图标时，标题会移动并将图标后的空间居中。有没有办法在不硬编码标题中的空格来平衡的情况下做到这一点？

这是我的代码：

<v-app-bar
  color="black"
  app
>
  <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
  <v-spacer />
  <v-app-bar-title
    class="text-no-wrap text-h3"
    style="width: fit-content;">
    Title
  </v-app-bar-title>
  <v-spacer />
</v-app-bar>

【问题讨论】：

你能给我们看看视觉效果还是复制品？

标签： css vue.js nuxt.js vuetify.js

【解决方案1】：

我会说你有一些重要的事情要做。首先将以下类添加到<v-app-bar-title>

<v-app-bar-title
    class="text-h3 d-flex justify-center">
    Title
</v-app-bar-title>

然后在您的主 CSS 文件中添加以下类覆盖：

.v-app-bar-title__content {
  display: flex;
}

【讨论】：