垂直对齐卡片中的文字（Vuetify）

Question

我想在Vue上使用Vuetify或常规CSS将某些文本垂直对齐至卡片：

我的代码：

    <template>
  <div>
    <v-container class="my-5">

      <v-row justify="space-between">

        <v-col cols="12" md="6" lg="3">
           <v-btn outline block class="primary">1</v-btn>
        </v-col>

        <v-col cols="12" md="6" lg="3">
           <v-btn outline block class="primary">1</v-btn>
        </v-col>

        <v-col cols="12" md="6" lg="3">
           <v-card outlined color="red" height="450">
             <p class="mx-3 text-center">texto textinho texto textao texto bla bla bla pi popopopo blabla bleuu bli pei pou</p>
           </v-card>
        </v-col>

      </v-row>

    </v-container>
  </div>
</template>

Answer 1

您可以使用vuetify提供的 flex align ，将其添加到卡标签d-flex align-center中：

<v-card outlined color="red" height="450" class="d-flex align-center">

DEMO