Vuetify에서 v-card 구성 요소의 중앙에 콘텐츠를 맞추는 방법

Vuetify에서 v-card 구성 요소의 중앙에 콘텐츠를 맞추는 방법

현재 제품에 포함되어 있다.vue, 나는 4개의 객체를 포함하는 productList의 배열을 가지고 있다.어레이를 반복해서 각 개체를 ProductsItem에 전달한다.부에 구성 요소그 구성 요소에서, 나는 부에티피로 카드를 만든다.

카드의 중앙에 내용물을 맞출 수 없다.

여기 내 코드, 내 카드의 스크린샷, 그리고 원하는 결과물이 있다.

상품들부에를 하다

    <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.부에를 하다

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

업데이트: Vuetify 1.5 및 2 버전 모두에서 작동:

중앙 집중화하려면v-card-text내용은 단지 적용하기class=text-center

v-card-title그리고v-card-actions유연한 구성 요소, 즉,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>

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-spacer />
  <v-btn color="orange">Some Button</v-btn>
  <v-spacer />
</v-card-actions>

참조URL: https://stackoverflow.com/questions/55574599/how-to-align-the-contents-to-the-center-of-the-v-card-component-in-vuetify