fix: Checkbox align style (#41566)

* chore: use flex align center instead

* test: update test case

* chore: adjust space align

* chore: fix missing selector

* chore: revert space modify

* chore: offset cal

components/checkbox/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -410,6 +410,25 @@ exports[`renders components/checkbox/demo/debug-line.tsx extend context correctl
       </span>
     </label>
   </div>
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+        value=""
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+    <span>
+      Aligned
+    </span>
+  </label>
 </div>
 `;
 

components/checkbox/__tests__/__snapshots__/demo.test.tsx.snap

@@ -383,6 +383,24 @@ exports[`renders components/checkbox/demo/debug-line.tsx correctly 1`] = `
       </span>
     </label>
   </div>
+  <label
+    class="ant-checkbox-wrapper"
+  >
+    <span
+      class="ant-checkbox"
+    >
+      <input
+        class="ant-checkbox-input"
+        type="checkbox"
+      />
+      <span
+        class="ant-checkbox-inner"
+      />
+    </span>
+    <span>
+      Aligned
+    </span>
+  </label>
 </div>
 `;
 

components/checkbox/demo/debug-line.tsx

@@ -1,5 +1,5 @@
+import { Checkbox, ConfigProvider, Radio, Space } from 'antd';
 import React from 'react';
-import { Checkbox, Radio, Space } from 'antd';
 
 const sharedStyle: React.CSSProperties = {
   border: '1px solid red',
@@ -43,6 +43,16 @@ const App: React.FC = () => (
       <div>Bamboo</div>
       <Radio value="little">Little</Radio>
     </div>
+
+    <ConfigProvider
+      theme={{
+        token: {
+          controlHeight: 48,
+        },
+      }}
+    >
+      <Checkbox>Aligned</Checkbox>
+    </ConfigProvider>
   </div>
 );
 

components/checkbox/style/index.ts

@@ -71,19 +71,26 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
       [checkboxCls]: {
         ...resetComponent(token),
 
-        top: '0.2em',
         position: 'relative',
         whiteSpace: 'nowrap',
         lineHeight: 1,
         cursor: 'pointer',
 
+        alignSelf: 'start',
+        // https://github.com/ant-design/ant-design/issues/41564
+        // Since `checkboxSize` is dynamic which should align with the text box,
+        // We need do calculation here for offset.
+        transform: `translate(0, ${
+          (token.lineHeight * token.fontSize) / 2 - token.checkboxSize / 2
+        }px)`,
+
         // Wrapper > Checkbox > input
         [`${checkboxCls}-input`]: {
           position: 'absolute',
           // Since baseline align will get additional space offset,
           // we need to move input to top to make it align with text.
           // Ref: https://github.com/ant-design/ant-design/issues/38926#issuecomment-1486137799
-          inset: `-0.2em 0`,
+          inset: 0,
           zIndex: 1,
           cursor: 'pointer',
           opacity: 0,