Vuetify - How to align app-bar text to center-CodePudding

I'm using Vue3/Vuetify3, I'm trying to align the text of the app-bar to the center, but for some reason when I try to add text-center to the v-app-bar-title like so:

<div >

and/or I append the text-center on to the div or to the v-container, nothing successfully makes thev-app-bar-title text centered.

I tried one thing that worked, which was removing the existing div classes and just adding text-center, but I'm assuming this will mess with responsiveness since afaik d-flex and align-center are required for it?

Any explanations and/or suggestions would be much appreciated! Thanks in advance!

  <v-app>
    <v-app-bar>
      <v-container >
        <v-app-bar-title >
          <div >
            <v-avatar
              rounded="0"
              
              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>

CodePudding user response：

You should use the justify-center class to center the content , text-center will center text but not your container if you're using flexbox. You can take a look at this vuetify documentation Vuetify CSS Flex Helpers

CodePudding user response：

the flexbox helpers override text-center. you can use justify-center with flexbox, or remove the flex classnames and just use text-center

<v-app-bar-title >
  <div >
    <v-avatar
      rounded="0"
      
      image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
    />
    Example Sentence that should be centered
  </div>
</v-app-bar-title>