fix: Divider horizontal line align (#39334)

* fix: divider hor align

* test: Update snapshot

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>,
 ]
 `;
 

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>,
 ]
 `;
 

components/divider/demo/customize-style.md

@@ -27,6 +27,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>
   </>
 );
 

components/divider/style/index.less

@@ -29,6 +29,7 @@
 
   &-horizontal&-with-text {
     display: flex;
+    align-items: center;
     margin: 16px 0;
     color: @heading-color;
     font-weight: 500;
@@ -41,7 +42,6 @@
     &::before,
     &::after {
       position: relative;
-      top: 50%;
       width: 50%;
       border-top: @border-width-base solid transparent;
       // Chrome not accept `inherit` in `border-top`
@@ -54,24 +54,20 @@
 
   &-horizontal&-with-text-left {
     &::before {
-      top: 50%;
       width: @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
   }
 
   &-horizontal&-with-text-right {
     &::before {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: @divider-orientation-margin;
     }
   }