Javascript 如何在Vuetify中生成卡片或工作表中的文本

我正在使用一个卡片组件，我试图使文本垂直对齐。 它看起来不像是垂直对齐的 我使用内容对齐，使用填充或边距。但它现在运行良好。 我不知道为什么会发生这种情况

卡片组件：它是我使用的卡片组件的一部分

<div class="d-flex grow flex-wrap">
  <v-avatar
    v-if="avatar"
    size="30"
    class="mx-auto v-card--material__avatar elevation-6"
    color="grey"
  >
    <v-img :src="avatar" />
  </v-avatar>

  <v-sheet
    v-else
    :class="{
      'pa-2': !$slots.image
    }"
    :color="color"
    :max-height="icon ? 90 : undefined"
    :width="icon ? 'auto' : '100%'"
    elevation="6"
    class="text-start v-card--material__heading mb-n6"
    dark
  >
    <slot
      v-if="$slots.heading"
      name="heading"
    />

    <slot
      v-else-if="$slots.image"
      name="image"
    />

    <div
      v-else-if="title && !icon"
      class="display-1 font-weight-light"
      v-text="title"
    />

    <v-icon
      v-else-if="icon"
      size="32"
      v-text="icon"
    />

    <div
      v-if="text"
      class="headline font-weight-thin"
      v-text="text"
    />
  </v-sheet>

  <div
    v-if="$slots['after-heading']"
    class="ml-6"
  >
    <slot name="after-heading" />
  </div>

  <div
    v-else-if="icon && title"
    class="ml-4"
  >
    <div

      class="card-title font-weight-light"
      v-text="title"
    />
  </div>
</div>

我使用的是这样的代码卡组件

<base-material-card
          color="warning"
          class="px-5 py-3 ma-0 pa-0"
        >
          <template v-slot:heading>
            <div
              class="display-2 font-weight-light"
            >
              User
            </div>
          </template>
          <v-card-text>
            <v-data-table
              hide-default-header
              dense
              :headers="headers"
              :items="items"
            />
          </v-card-text>
        </base-material-card>
      </v-col>

使用者