Question

我一直在玩vuetify，我一直在尝试模仿特定的布局，以查看是否可以这样做并添加标签。到目前为止，我已经能够将内容居中，但是以一种我认为很奇怪的方式。我希望h1在头像下。

我使用v-spacer将内容居中并添加了位于底部居中的标签

当我使用v型槽时，它会将所有东西对齐。如果只是头像，那就完美了。

当我在其下添加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

这将插入一个网格，使您可以将默认内容的单个容器转换为两个单独的行。

Vuetify在工具栏/应用栏内对齐堆叠的元素

1 个答案: