Vuetify aligning stacked elements within tool bar/app bar

Question

I have been playing with vuetify, I've been trying to mimic a specific layout to see if I can do it and add tabs. So far, I've been able to center stuff but in a way that I view as weird. I want the h1 to be under the avatar.

I used v-spacer to center things and added tabs that are centered at the bottom

when I use v-slot it aligns everything in the middle. If it's just the avatar it's perfect.

When I add an h1 under it does not go directly under.

I've been looking at the api and can't figure out.

Here's a link to the codepen https://codepen.io/sanwil9/pen/mYQaRx

<div id="app">
  <v-app id="inspire">
    <v-app-bar prominent extended
    src="https://images3.alphacoders.com/114/114869.jpg"
    dark
    >
      <v-spacer></v-spacer>
      <v-avatar
                size="90"
              >
                <img

                  src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&v=beta&t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
                  alt="Avatar"
                />
              </v-avatar>
      <h1>Super Steve</h1>
      <v-spacer></v-spacer>
       <template v-slot:extension>
      </template>

      <template v-slot:extension>
        <v-tabs centered>
          <v-tab>Tab 1</v-tab>
          <v-tab>Tab 2</v-tab>
          <v-tab>Tab 3</v-tab>
        </v-tabs>
      </template>
    </v-app-bar>
    <v-content>
      <v-container grid-list-md text-xs-center>
        <v-layout row wrap>
          <v-flex xs12>
            <v-card dark color="primary">
              <v-card-text class="px-0">12</v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="i in 2" :key="`6${i}`" xs6>
            <v-card dark color="secondary">
              <v-card-text class="px-0">6</v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="i in 3" :key="`4${i}`" xs4>
            <v-card dark color="primary">
              <v-card-text class="px-0">4</v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="i in 4" :key="`3${i}`" xs3>
            <v-card dark color="secondary">
              <v-card-text class="px-0">3</v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="i in 6" :key="`2${i}`" xs2>
            <v-card dark color="primary">
              <v-card-text class="px-0">2</v-card-text>
            </v-card>
          </v-flex>
          <v-flex v-for="i in 12" :key="`1${i}`" xs1>
            <v-card dark color="secondary">
              <v-card-text class="px-0">1</v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>

    </v-content>

  </v-app>
</div>

Help me align the h1 under the gravatar. I want it to be aligned.

Answer 1

Within the <v-app-bar> you can include the following:

<v-container>
    <v-layout row>
        a spacer, the avatar, and another spacer
    </v-layout>
    <v-layout row>
       a spacer, the <h1>, and another spacer
    </v-layout>
</v-container>
the template for the extension

This will insert a grid which will allow you to turn the single container of default content into two separate rows.