时间戳

首页 > 解决方案 > 如何使用 Vuetify 将 v-card 放在页面中心

vuetify.js - 如何使用 Vuetify 将 v-card 放在页面中心

问题描述

我的目标是在页面中心放置一张 v-card。我正在使用 Vuetify。此代码应该可以工作，但不能：

<template>
  <v-container fill-height>
    <v-row align="center" justify="center">
      <v-col>
        <v-card flat color="grey" class="lighten-3" max-width="500px">
          <v-card-title>{{ title }}</v-card-title>
          <v-card-text>
            <slot name="content"></slot>
          </v-card-text>
          <v-card-actions>
            <slot name="actions"></slot>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

我究竟做错了什么？请帮忙。

更多上下文：我在多个地方将它用作 BaseComponent。这是我的例子：

<template>
  <div>
    <BaseInfoMenu title="Title">
      <template slot="content">
        //content
      </template>
      <v-btn slot="actions">...</v-btn
  </div>
  //Some invisible divs 
</template>

标签： vuetify.js

解决方案

我解决了。BaseInfoMenu 组件周围的 div 是问题所在。我删除了它。此外 align="center" 必须进入 v-col 或删除 v-col。功能代码如下所示：

<template>
  <v-container fill-height>
    <v-row justify="center" align="center"> //No v-col
      <v-card flat color="grey" class="lighten-3" max-width="500px">
        <v-card-title>{{ title }}</v-card-title>
        <v-card-text>
          <slot name="content"></slot>
        </v-card-text>
        <v-card-actions>
          <slot name="actions"></slot>
        </v-card-actions>
      </v-card>
    </v-row>
  </v-container>
</template>

上下文将是

<template>
  <BaseInfoMenu title="Title"> //no div
    <template slot="content">
      //content
    </template>
    <v-btn slot="actions">...</v-btn
  //Some invisible divs 
</template>

推荐阅读