如何在 Vuetify 1.5 版中垂直对齐内容

如何解决如何在 Vuetify 1.5 版中垂直对齐内容

我正在尝试在屏幕上制作卡片，我想为该卡片添加标题和图标，该标题和图标我想垂直对齐卡片的中心。我正在尝试一切，但仍然无法正常工作 这是我的主要组件

<v-container fluid>
      <v-layout row wrap align-center justify-center fill-height>
        <v-flex xs12 sm6 md4 lg4>
          <v-hover v-slot="{ hover }">
            <v-card
              :elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
              class="primary ma-4 white--text"
              height="300"
            >
              <FirstTile></FirstTile>
            </v-card>
          </v-hover>
        </v-flex>
       </v-layout>
<v-container>

这是我的 FirstTile 标签代码

<v-flex xs12>
  <v-layout align-center justify-center fill-height>
    <v-card-title primary-title id="heading">
      Profit/Loss
    </v-card-title>
  </v-layout>
  <v-layout align-center justify-center fill-height>
    <v-card-action>
      <v-icon
        x-large
        color="white"
      > swap_vert
      </v-icon>
    </v-card-action>
  </v-layout>
</v-flex>

解决方法

您的 FirstTile html 可能是这样的。 align-center 将垂直填充空间。

<v-container bg fill-height grid-list-md text-xs-center>
        <v-layout row wrap align-center>
          <v-flex>
              <v-card-text >Profit/loss </v-card-text>
             <v-icon
                x-large
               color="white"
             > swap_vert
            </v-icon>
          </v-flex>          
        </v-layout>             
</v-container>