Vuetify - how to add margin to text within v-app-bar?-CodePudding

I'm using Vue3/Vuetify3, I'm trying to push the text of the v-app-bar about 300px to the right. When I just add a padding to the div element it doesn't do anything. Afaik vuetify works with flexbox, and I'm struggling to understand how to work with this.

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：

Based on the comments I came up with this, it is also responsive. This should just move the text:

<style>
  @media (min-width: 600px) {
    .app-bar-text {
      margin-left: 300px;
    }
  }
</style>

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

CodePudding user response：

Use justify-center to horizontal alignment.

<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>

Read more about horizontal alignment here- https://next.vuetifyjs.com/en/styles/flex/#flex-justify