Fix the vertical alignment for the title of Card (#11036)

* fix: The title of Card should be vertically aligned, close #10576

* Update index.less

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -150,3 +150,43 @@ exports[`Card should still have padding when card which set padding to 0 is load
   </div>
 </div>
 `;
+
+exports[`Card title should be vertically aligned 1`] = `
+<div
+  class="ant-card ant-card-bordered"
+  style="width: 300px;"
+>
+  <div
+    class="ant-card-head"
+  >
+    <div
+      class="ant-card-head-wrapper"
+    >
+      <div
+        class="ant-card-head-title"
+      >
+        Card title
+      </div>
+      <div
+        class="ant-card-extra"
+      >
+        <button
+          class="ant-btn"
+          type="button"
+        >
+          <span>
+            Button
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-card-body"
+  >
+    <p>
+      Card content
+    </p>
+  </div>
+</div>
+`;

components/card/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Card from '../index';
+import Button from '../../button/index';
 
 const testMethod = typeof window !== 'undefined' ? it : xit;
 
@@ -39,4 +40,13 @@ describe('Card', () => {
     const wrapper = mount(<Card loading bodyStyle={{ padding: 0 }}>xxx</Card>);
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('title should be vertically aligned', () => {
+    const wrapper = mount(
+      <Card title="Card title" extra={<Button>Button</Button>} style={{ width: 300 }}>
+        <p>Card content</p>
+      </Card>
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/card/style/index.less

@@ -46,7 +46,8 @@
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
-      display: inline-block;
+      display: flex;
+      align-items: center;
       flex: 1;
     }