Vuetify3/Vue3中如何将App Bar文本居中对齐

问题原因 #

你加text-center没效果，是因为这个类只对块级容器里的行内元素生效，但你给div加了d-flex后，容器变成了flex布局，flex布局下的水平对齐得用flex专属的对齐属性，text-center自然失效。

安全的解决方案（保留响应式） #

不用移除d-flex align-center，这俩类负责垂直居中元素，确实是必要的。只需要加两个关键类就能实现水平居中：

• 给包含头像和文本的div加justify-content-center：flex布局下，这个类控制主轴（水平方向）上的元素居中
• 给v-app-bar-title加w-100：让标题容器占满父级宽度，保证flex容器有足够空间实现居中

修改后的代码：

<v-app>
  <v-app-bar>
    <v-container class="d-flex align-center py-0">
      <v-app-bar-title class="pl-0 w-100">
        <div class="d-flex align-center justify-content-center">
          <v-avatar
            rounded="0"
            class="mr-3"
            image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
          />

          Example Sentence that should be centered
        </div>
      </v-app-bar-title>
    </v-container>
  </v-app-bar>
</v-app>

额外说明 #

如果你的App Bar左右没有其他操作按钮（比如菜单、返回键），这样设置就完全没问题；如果之后要加左右按钮，只需要调整v-app-bar-title的布局，或者用v-spacer来分隔元素，也能保持标题居中。

内容的提问来源于stack exchange，提问作者JakeDrone