From 37c83beeca7683a02b421911c5a6703ddbc527b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Wed, 7 Dec 2022 14:25:26 +0800
Subject: [PATCH] fix: Divider horizontal line align (#39339)

* fix: divider hor align

* test: Update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap        | 15 +++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap     | 15 +++++++++++++++
 components/divider/demo/customize-style.tsx       |  6 ++++++
 components/divider/style/index.tsx                |  6 +-----
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
index aa54fa2d5f..563b0ba869 100644
--- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -33,6 +33,21 @@ Array [
     role="separator"
     style="height:60px;border-color:#7cb305"
   />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
diff --git a/components/divider/__tests__/__snapshots__/demo.test.ts.snap b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
index 8af60aeef2..72e62c4271 100644
--- a/components/divider/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/divider/__tests__/__snapshots__/demo.test.ts.snap
@@ -33,6 +33,21 @@ Array [
     role="separator"
     style="height:60px;border-color:#7cb305"
   />,
+  <div
+    style="display:flex;flex-direction:column;height:50px;box-shadow:0 0 1px red"
+  >
+    <div
+      class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+      role="separator"
+      style="background:rgba(0,255,0,0.05)"
+    >
+      <span
+        class="ant-divider-inner-text"
+      >
+        Text
+      </span>
+    </div>
+  </div>,
 ]
 `;
 
diff --git a/components/divider/demo/customize-style.tsx b/components/divider/demo/customize-style.tsx
index d537eb0b54..29621bb498 100644
--- a/components/divider/demo/customize-style.tsx
+++ b/components/divider/demo/customize-style.tsx
@@ -10,6 +10,12 @@ const App: React.FC = () => (
     </Divider>
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
+
+    <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>
+      <Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation="left">
+        Text
+      </Divider>
+    </div>
   </>
 );
 
diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx
index 118cfaabfd..ae8beabca2 100644
--- a/components/divider/style/index.tsx
+++ b/components/divider/style/index.tsx
@@ -45,6 +45,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
       '&-horizontal&-with-text': {
         display: 'flex',
+        alignItems: 'center',
         margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
         color: token.colorTextHeading,
         fontWeight: 500,
@@ -55,7 +56,6 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
         '&::before, &::after': {
           position: 'relative',
-          top: '50%',
           width: '50%',
           borderBlockStart: `${lineWidth}px solid transparent`,
           // Chrome not accept `inherit` in `border-top`
@@ -68,24 +68,20 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
 
       '&-horizontal&-with-text-left': {
         '&::before': {
-          top: '50%',
           width: '5%',
         },
 
         '&::after': {
-          top: '50%',
           width: '95%',
         },
       },
 
       '&-horizontal&-with-text-right': {
         '&::before': {
-          top: '50%',
           width: '95%',
         },
 
         '&::after': {
-          top: '50%',
           width: '5%',
         },
       },