vue.js - Vuetify 对齐工具栏/应用栏中的堆叠元素

Question

我一直在玩 vuetify，我一直在尝试模仿特定的布局，看看我是否可以做到并添加选项卡。到目前为止，我已经能够将东西居中，但我认为这是一种奇怪的方式。我希望 h1 位于头像下方。

我使用 v-spacer 将事物居中并添加了在底部居中的标签

当我使用 v-slot 时，它会在中间对齐所有内容。 如果只是头像就完美了

当我在下面添加一个 h1 时，它不会直接在下面。

我一直在查看 API，但无法弄清楚。

这是代码笔的链接 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>

帮我把头像下面的h1对齐。我希望它对齐。

Answer 1

在<v-app-bar>内您可以包括以下内容:

<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

这将插入一个网格，允许您将默认内容的单个容器变成两个单独的行。