alignment - How to vertically align the content in Vuetify version 1.5

Question

I am trying to make cards on the screen and I want to add a title and icon for that card that title and icon I want to align vertically center of the card. I am trying everything but still is not working This is my main component

<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>

This is my FirstTile tag code

<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>

question from:https://stackoverflow.com/questions/65861739/how-to-vertically-align-the-content-in-vuetify-version-1-5

Answer 1

Your FirstTile html could be something like this. align-center will fill the space vertically.

<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>