[bugfix] Card: centered prop not work (#2589)

packages/card/en-US.md

@@ -53,6 +53,7 @@ Use slot to custom content.
 | num | Number | `String | Number` | - |
 | price | Price | `String | Number` | - |
 | origin-price | Origin price | `String | Number` | - |
+| centered | Whether content vertical centered | `String` | `false` |
 | currency | Currency symbol |  `String` | `¥` |
 | thumb-link | Thumb link URL | `String` | - |
 | lazy-load | Whether to enable thumb lazy load，should register [Lazyload](#/en-US/lazyload) component | `Boolean` | `false` |

packages/card/index.js

@@ -9,6 +9,7 @@ export default sfc({
     desc: String,
     thumb: String,
     title: String,
+    centered: Boolean,
     lazyLoad: Boolean,
     thumbLink: String,
     num: [Number, String],
@@ -67,7 +68,7 @@ export default sfc({
       <div class={bem()}>
         <div class={bem('header')}>
           {Thumb}
-          <div class={bem('content')}>
+          <div class={bem('content', { centered: this.centered })}>
             {Title}
             {Desc}
             {slots.tags}

packages/card/index.less

@@ -13,12 +13,6 @@
     margin-top: 10px;
   }
 
-  &--center,
-  &__thumb {
-    align-items: center;
-    justify-content: center;
-  }
-
   &__header {
     display: flex;
   }
@@ -29,6 +23,8 @@
     height: 90px;
     margin-right: 10px;
     flex: none;
+    align-items: center;
+    justify-content: center;
 
     img {
       border: none;
@@ -39,9 +35,15 @@
 
   &__content {
     position: relative;
+    display: flex;
     flex: 1;
     height: 90px;
+    flex-direction: column;
     min-width: 0; /* hack for flex box ellipsis */
+
+    &--centered {
+      justify-content: center;
+    }
   }
 
   &__title,

packages/card/zh-CN.md

@@ -53,6 +53,7 @@ Vue.use(Card);
 | num | 商品数量 | `String | Number` | - | - |
 | price | 商品价格 | `String | Number` | - | - |
 | origin-price | 商品划线原价 | `String | Number` | - | 1.3.6 |
+| centered | 内容是否垂直居中 | `String` | `false` | - |
 | currency | 货币符号 |  `String` | `¥` | - |
 | thumb-link | 点击左侧图片后的跳转链接 | `String` | - | 1.3.4 |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `Boolean` | `false` | 1.5.0 |