Vuetify中如何将内容对齐到v-card组件的中心？答案

【问题标题】：How to align the contents to the center of the v-card component in Vuetify?Vuetify中如何将内容对齐到v-card组件的中心？
【发布时间】：2019-08-29 16:07:43
【问题描述】：

目前在 products.vue 中，我有一个包含 4 个对象的 productList 数组。我将遍历数组并将每个单独的对象传递给 ProductsItem.vue 组件。在该组件中，我使用 vuetify 创建卡片。

我无法将内容与卡片中心对齐。

这是我的代码，我的卡片截图和想要的结果

Products.vue

    <template>
      <div>
        <h1>Products</h1>
        <v-container class="my-5">
          <v-layout row wrap>
            <v-flex xs12 sm6 md4 v-for="productItem in productList" 
    :key="productItem.id">
              <ProductItems :productItem="productItem"/>
            </v-flex>
          </v-layout>
        </v-container>
      </div>
    </template>

    <script>
    import ProductItems from "@/components/ProductItems";


    export default {
      data() {
        return {
          productList: [
            {
              id: 1,
              name: "Superdry",
              description: "Rookie Aviator Patched Bomber"
            },
            {
              id: 2,
              name: "SuperHot",
              description: "Rookie Aviator Patched Bomber"
            },
            {
              id: 3,
              name: "Buron MensWear",
              description: "Skinny Fit Oxford Shirt In White"
            },
            {
              id: 4,
              name: "Asos",
              description: "slim shirt with stretch in blue"
            }
          ]
        };
      },

        components: {
          ProductItems
        }
      }
    </script>

ProductItem.vue

    <template>
      <v-card flat class="ma-3 text-xs-center">
      <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect- 
    ratio="2.75"></v-img>
        <v-card-title primary-title>
          <div>
            <h3 class="headline pink--text text--accent-2"> 
    {{productItem.name}}</h3>
            <div>{{productItem.description}}</div>
          </div>
        </v-card-title>
        <v-card-actions>
          <v-btn flat color="orange">Add to Cart</v-btn>
        </v-card-actions>
      </v-card>
    </template>

    <script>
    export default {
      props: ["productItem"],
      data() {
        return {};
      }
    };
    </script>

<style>
</style>

【问题讨论】：

你能提供一个 CodePen 或 JsFiddle 吗？
@Toodoo 当然，等一下
vuetify center items into v-flex的可能重复
@Toodoo 嗨，我不知道如何使用 CodePen。因此，我没有使用两个组件，而是将其组合成一个组件。此外，卡片是硬编码的，而不是使用 for 循环，并且图像没有显示。这是链接：codepen.io/neo-tian-how/pen/KYNwBZ?editors=1100
@Issaki 在您的代码笔中，标题居中。你想集中哪个部分？

标签： vue.js vuetify.js

【解决方案1】：

更新：适用于 Vuetify 1.5 和 2 版本：

要集中 v-card-text 内容，只需应用 class=text-center

v-card-title 和 v-card-actions 是 flex 组件，因此通过将 class="justify-center" 添加到两者，您可以集中整个事情：

<v-card-title primary-title class="justify-center">
  <div>
    <h3 class="headline pink--text text--accent-2>Superdry</h3>
    <div>Rookie Aviator Patched BomberproductItem.description</div>
  </div>
</v-card-title>
<v-card-actions class="justify-center">
  <v-btn flat color="orange">Add to Cart</v-btn>
</v-card-actions>

我在您提供的 Codepen 中使用了您自己的示例。

希望对你有帮助:)

【讨论】：

不客气。其实你甚至不需要class="text-xs-center" 所以我把它从我的答案中删除了

【解决方案2】：

您还可以使用 v-spacer 将 v-card 中的组件居中

<v-card-title>
  <v-spacer />
  <div class="text-center">
    <h3 class="headline pink--text text--accent-2">Headline</h3>
    <div>Some description about the headline</div>
  </div>
  <v-spacer />
</v-card-title>
<v-card-actions v-if="getNestedSafe(() => order.order_items.length)">
  <v-spacer />
  <v-btn flat color="orange">Some Button</v-btn>
  <v-spacer />
</v-card-actions>

【讨论】：