title: Vuetify aligning stacked elements within tool bar/app bar
body: <p>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. </p>
  
  <p>I used v-spacer to center things and added tabs that are centered at the bottom</p>
  
  <p>when I use v-slot it aligns everything in the middle. 
  If it's just the avatar it's perfect. </p>
  
  <p>When I add an h1 under it does not go directly under.</p>
  
  <p>I've been looking at the api and can't figure out. </p>
  
  <p>Here's a link to the codepen <a href="https://codepen.io/sanwil9/pen/mYQaRx" rel="nofollow noreferrer">https://codepen.io/sanwil9/pen/mYQaRx</a></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-app-bar prominent extended
      src="https://images3.alphacoders.com/114/114869.jpg"
      dark
      &gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-avatar
                  size="90"
                &gt;
                  &lt;img
  
                    src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&amp;v=beta&amp;t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
                    alt="Avatar"
                  /&gt;
                &lt;/v-avatar&gt;
        &lt;h1&gt;Super Steve&lt;/h1&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
         &lt;template v-slot:extension&gt;
        &lt;/template&gt;
  
        &lt;template v-slot:extension&gt;
          &lt;v-tabs centered&gt;
            &lt;v-tab&gt;Tab 1&lt;/v-tab&gt;
            &lt;v-tab&gt;Tab 2&lt;/v-tab&gt;
            &lt;v-tab&gt;Tab 3&lt;/v-tab&gt;
          &lt;/v-tabs&gt;
        &lt;/template&gt;
      &lt;/v-app-bar&gt;
      &lt;v-content&gt;
        &lt;v-container grid-list-md text-xs-center&gt;
          &lt;v-layout row wrap&gt;
            &lt;v-flex xs12&gt;
              &lt;v-card dark color="primary"&gt;
                &lt;v-card-text class="px-0"&gt;12&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
            &lt;v-flex v-for="i in 2" :key="`6${i}`" xs6&gt;
              &lt;v-card dark color="secondary"&gt;
                &lt;v-card-text class="px-0"&gt;6&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
            &lt;v-flex v-for="i in 3" :key="`4${i}`" xs4&gt;
              &lt;v-card dark color="primary"&gt;
                &lt;v-card-text class="px-0"&gt;4&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
            &lt;v-flex v-for="i in 4" :key="`3${i}`" xs3&gt;
              &lt;v-card dark color="secondary"&gt;
                &lt;v-card-text class="px-0"&gt;3&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
            &lt;v-flex v-for="i in 6" :key="`2${i}`" xs2&gt;
              &lt;v-card dark color="primary"&gt;
                &lt;v-card-text class="px-0"&gt;2&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
            &lt;v-flex v-for="i in 12" :key="`1${i}`" xs1&gt;
              &lt;v-card dark color="secondary"&gt;
                &lt;v-card-text class="px-0"&gt;1&lt;/v-card-text&gt;
              &lt;/v-card&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-container&gt;
  
      &lt;/v-content&gt;
  
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Help me align the h1 under the gravatar. I want it to be aligned.</p>