I'm trying to stack a v-card-title on top of a v-card-subtitle and then v-card-text and the text is overlapping. Don't these elements vertically stack by default?:

<v-main>
  <v-container fluid style="padding:0px"> 
    <v-row no-gutters>
      <v-col :cols="12" :md="6">

        <v-card 
           height='100%' 
           style="position: relative"
           elevation="0">

           <v-card-title
             >
                  lorem ipsum dolor
           </v-card-title>

           <v-card-subtitle >
              lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
           </v-card-subtitle>

           <v-card-text >
               lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum 
               dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum 
               dolor
           </v-card-text>
        </v-card>
      </v-col>
      <v-col :cols="12" :md="6">
        <v-img :src="{myImage}"></v-img>
      </v-col>
    </v-row>
    {...about 4 more rows identical to above...}
  </v-container>
</v-main>

and here are my styles:

.header{
    font-family: 'Cormorant Garamond', serif;
    font-size: 85px;
  }
  .subHeader{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
  }
  .subText{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    color:#333;
  }

and then if I try to vertically horizontally center everything using this on the v-card, everything then lines up horizontally:

What am I just not getting here?

CodePudding user response：

Using d-flex turns your card into a flexbox container transforming direct children elements. What you're seeing is the default behavior of flex children. They display in a row because by default the flex-direction property is set to row. Read more at MDN Web Docs.

Anyway, you don't need to use d-flex in this case. Vuetify provides a helper class fill-height that will center the contents of the v-container. From the docs:

fill-height applies height: 100% to an element. When applied to v-container it will also align-items: center.

For example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container fluid fill-height style="padding:0px">
        <v-row no-gutters justify=center>
          <v-col cols="6">
            <v-card  elevation="2" >
              <v-card-title >
                lorem ipsum dolor
              </v-card-title>

              <v-card-subtitle >
                lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
              </v-card-subtitle>

              <v-card-text >
                lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum dolor
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>