fix: use flex to correct avatar child position (#47236)

* fix: remove avatar border when height less then 16

* fix: 使用 flex 完成子元素居中布局

* fix: fix avatar tests snapshot

* fix: fix avatar tests snapshot

* Update components/avatar/style/index.ts

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: mr-chenguang <37072324+lcgash@users.noreply.github.com>

* fix: changealign

* fix: update avatar snapshots

* fix:update snapshot

* fix: update snapshot

* fix: update snapshot

---------

Signed-off-by: mr-chenguang <37072324+lcgash@users.noreply.github.com>
Co-authored-by: afc163 <afc163@gmail.com>

components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -4,11 +4,11 @@ exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] =
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 24px; height: 24px; line-height: 24px; font-size: 18px;"
+    style="width: 24px; height: 24px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -18,11 +18,11 @@ exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] =
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 32px; height: 32px; line-height: 32px; font-size: 18px;"
+    style="width: 32px; height: 32px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -32,11 +32,11 @@ exports[`Avatar Render adjusts component size to 40 when window size is md 1`] =
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
+    style="width: 40px; height: 40px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -46,11 +46,11 @@ exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] =
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;"
+    style="width: 64px; height: 64px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -60,11 +60,11 @@ exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] =
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"
+    style="width: 80px; height: 80px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -74,11 +74,11 @@ exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`]
 <div>
   <span
     class="ant-avatar ant-avatar-circle"
-    style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
+    style="width: 100px; height: 100px; font-size: 18px;"
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
     />
   </span>
 </div>
@@ -90,7 +90,7 @@ exports[`Avatar Render fallback 1`] = `
 >
   <span
     class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   >
     A
   </span>
@@ -103,7 +103,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 >
   <span
     class="ant-avatar-string"
-    style="transform: scale(0.72) translateX(-50%);"
+    style="transform: scale(0.72);"
   />
 </span>
 `;
@@ -111,7 +111,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
 <span
   class="ant-avatar-string"
-  style="transform: scale(0.72) translateX(-50%);"
+  style="transform: scale(0.72);"
 >
   Avatar
 </span>
@@ -120,7 +120,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 1`] =
 exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
 <span
   class="ant-avatar-string"
-  style="transform: scale(0.72) translateX(-50%);"
+  style="transform: scale(0.72);"
 >
   xx
 </span>
@@ -129,7 +129,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 2`] =
 exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
 <span
   class="ant-avatar-string"
-  style="transform: scale(0.36) translateX(-50%);"
+  style="transform: scale(0.36);"
 >
   Avatar
 </span>
@@ -151,7 +151,7 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
 >
   <span
     class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   >
     Fallback
   </span>
@@ -171,11 +171,11 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
 exports[`Avatar Render support size is number 1`] = `
 <span
   class="ant-avatar ant-avatar-circle"
-  style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
+  style="width: 100px; height: 100px; font-size: 18px;"
 >
   <span
     class="ant-avatar-string"
-    style="line-height: 100px; transform: scale(0.32) translateX(-50%);"
+    style="transform: scale(0.32);"
   >
     TestString
   </span>

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

@@ -111,7 +111,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-icon"
-          style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
+          style="width: 64px; height: 64px; font-size: 32px;"
         >
           <span
             aria-label="user"
@@ -215,6 +215,34 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
           </span>
         </span>
       </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-circle ant-avatar-icon"
+          style="width: 14px; height: 14px; font-size: 7px;"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
     </div>
   </div>
   <div
@@ -229,7 +257,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar ant-avatar-square ant-avatar-icon"
-          style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
+          style="width: 64px; height: 64px; font-size: 32px;"
         >
           <span
             aria-label="user"
@@ -333,6 +361,34 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
           </span>
         </span>
       </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-square ant-avatar-icon"
+          style="width: 14px; height: 14px; font-size: 7px;"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -379,7 +435,7 @@ Array [
         >
           <span
             class="ant-avatar-string"
-            style="transform: scale(1) translateX(-50%);"
+            style="transform: scale(1);"
           >
             K
           </span>
@@ -390,7 +446,7 @@ Array [
         >
           <span
             class="ant-avatar-string"
-            style="transform: scale(1) translateX(-50%);"
+            style="transform: scale(1);"
           >
             +2
           </span>
@@ -588,7 +644,7 @@ Array [
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="transform: scale(1);"
     >
       U
     </span>
@@ -668,7 +724,7 @@ Array [
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         >
           K
         </span>
@@ -762,7 +818,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         K
       </span>
@@ -773,7 +829,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         +2
       </span>
@@ -888,7 +944,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         K
       </span>
@@ -899,7 +955,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         +2
       </span>
@@ -1014,7 +1070,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         K
       </span>
@@ -1025,7 +1081,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         +2
       </span>
@@ -1133,7 +1189,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         A
       </span>
@@ -1144,7 +1200,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         K
       </span>
@@ -1206,7 +1262,7 @@ exports[`renders components/avatar/demo/group.tsx extend context correctly 2`] =
 exports[`renders components/avatar/demo/responsive.tsx extend context correctly 1`] = `
 <span
   class="ant-avatar ant-avatar-circle ant-avatar-icon"
-  style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
+  style="width: 24px; height: 24px; font-size: 12px;"
 >
   <span
     aria-label="ant-design"
@@ -1284,7 +1340,7 @@ Array [
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         Avatar
       </span>
@@ -1306,7 +1362,7 @@ Array [
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         >
           Avatar
         </span>
@@ -1366,7 +1422,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         U
       </span>
@@ -1377,11 +1433,11 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
   >
     <span
       class="ant-avatar ant-avatar-circle"
-      style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
+      style="width: 40px; height: 40px; font-size: 18px;"
     >
       <span
         class="ant-avatar-string"
-        style="line-height: 40px; transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         USER
       </span>
@@ -1419,7 +1475,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       >
         U
       </span>

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

@@ -109,7 +109,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
       >
         <span
           class="ant-avatar ant-avatar-circle ant-avatar-icon"
-          style="width:64px;height:64px;line-height:64px;font-size:32px"
+          style="width:64px;height:64px;font-size:32px"
         >
           <span
             aria-label="user"
@@ -213,6 +213,34 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
           </span>
         </span>
       </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-circle ant-avatar-icon"
+          style="width:14px;height:14px;font-size:7px"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
     </div>
   </div>
   <div
@@ -227,7 +255,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
       >
         <span
           class="ant-avatar ant-avatar-square ant-avatar-icon"
-          style="width:64px;height:64px;line-height:64px;font-size:32px"
+          style="width:64px;height:64px;font-size:32px"
         >
           <span
             aria-label="user"
@@ -331,6 +359,34 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
           </span>
         </span>
       </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-square ant-avatar-icon"
+          style="width:14px;height:14px;font-size:7px"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
     </div>
   </div>
 </div>
@@ -985,7 +1041,7 @@ exports[`renders components/avatar/demo/type.tsx correctly 1`] = `
   >
     <span
       class="ant-avatar ant-avatar-circle"
-      style="width:40px;height:40px;line-height:40px;font-size:18px"
+      style="width:40px;height:40px;font-size:18px"
     >
       <span
         class="ant-avatar-string"

components/avatar/avatar.tsx

@@ -128,7 +128,6 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
       ? {
           width: currentSize,
           height: currentSize,
-          lineHeight: `${currentSize}px`,
           fontSize: currentSize && (icon || children) ? currentSize / 2 : 18,
         }
       : {};
@@ -178,7 +177,6 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
       ? {
           width: size,
           height: size,
-          lineHeight: `${size}px`,
           fontSize: icon ? size / 2 : 18,
         }
       : {};
@@ -200,26 +198,19 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
   } else if (icon) {
     childrenToRender = icon;
   } else if (mounted || scale !== 1) {
-    const transformString = `scale(${scale}) translateX(-50%)`;
+    const transformString = `scale(${scale})`;
     const childrenStyle: React.CSSProperties = {
       msTransform: transformString,
       WebkitTransform: transformString,
       transform: transformString,
     };
 
-    const sizeChildrenStyle: React.CSSProperties =
-      typeof size === 'number'
-        ? {
-            lineHeight: `${size}px`,
-          }
-        : {};
-
     childrenToRender = (
       <ResizeObserver onResize={setScaleParam}>
         <span
           className={`${prefixCls}-string`}
           ref={avatarChildrenRef}
-          style={{ ...sizeChildrenStyle, ...childrenStyle }}
+          style={{ ...childrenStyle }}
         >
           {children}
         </span>

components/avatar/demo/basic.tsx

@@ -9,12 +9,14 @@ const App: React.FC = () => (
       <Avatar size="large" icon={<UserOutlined />} />
       <Avatar icon={<UserOutlined />} />
       <Avatar size="small" icon={<UserOutlined />} />
+      <Avatar size={14} icon={<UserOutlined />} />
     </Space>
     <Space wrap size={16}>
       <Avatar shape="square" size={64} icon={<UserOutlined />} />
       <Avatar shape="square" size="large" icon={<UserOutlined />} />
       <Avatar shape="square" icon={<UserOutlined />} />
       <Avatar shape="square" size="small" icon={<UserOutlined />} />
+      <Avatar shape="square" size={14} icon={<UserOutlined />} />
     </Space>
   </Space>
 );

components/avatar/style/index.ts

@@ -76,29 +76,18 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
     borderRadiusSM,
     lineWidth,
     lineType,
-    calc,
   } = token;
 
   // Avatar size style
   const avatarSizeStyle = (size: number, fontSize: number, radius: number): CSSObject => ({
     width: size,
     height: size,
-    lineHeight: unit(calc(size).sub(calc(lineWidth).mul(2)).equal()),
     borderRadius: '50%',
 
     [`&${componentCls}-square`]: {
       borderRadius: radius,
     },
 
-    [`${componentCls}-string`]: {
-      position: 'absolute',
-      left: {
-        _skip_check_: true,
-        value: '50%',
-      },
-      transformOrigin: '0 center',
-    },
-
     [`&${componentCls}-icon`]: {
       fontSize,
       [`> ${iconCls}`]: {
@@ -111,7 +100,9 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
     [componentCls]: {
       ...resetComponent(token),
       position: 'relative',
-      display: 'inline-block',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       overflow: 'hidden',
       color: avatarColor,
       whiteSpace: 'nowrap',

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

@@ -15,7 +15,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -49,7 +49,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -72,7 +72,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <span
@@ -126,7 +126,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -263,7 +263,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1386,7 +1386,7 @@ exports[`renders components/badge/demo/component-token.tsx extend context correc
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -1582,7 +1582,7 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = `
     >
       <span
         class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
       />
     </span>
     <sup
@@ -1632,7 +1632,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1666,7 +1666,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1700,7 +1700,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1734,7 +1734,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1769,7 +1769,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1789,7 +1789,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1809,7 +1809,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1829,7 +1829,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1849,7 +1849,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1925,7 +1925,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -1948,7 +1948,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
           >
             <span
               class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
             />
           </span>
           <sup
@@ -2129,7 +2129,7 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] =
   >
     <span
       class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="transform: scale(1);"
     />
   </span>
   <sup
@@ -2171,7 +2171,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -2215,7 +2215,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -2238,7 +2238,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -2261,7 +2261,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -2800,7 +2800,7 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -2834,7 +2834,7 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -3028,7 +3028,7 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup
@@ -3062,7 +3062,7 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
       >
         <span
           class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
         />
       </span>
       <sup

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -574,7 +574,7 @@ exports[`ConfigProvider components Avatar configProvider 1`] = `
 >
   <span
     class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -585,7 +585,7 @@ exports[`ConfigProvider components Avatar configProvider componentDisabled 1`] =
 >
   <span
     class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -596,7 +596,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize large 1`]
 >
   <span
     class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -607,7 +607,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize middle 1`
 >
   <span
     class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -618,7 +618,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize small 1`]
 >
   <span
     class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -629,7 +629,7 @@ exports[`ConfigProvider components Avatar normal 1`] = `
 >
   <span
     class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;
@@ -640,7 +640,7 @@ exports[`ConfigProvider components Avatar prefixCls 1`] = `
 >
   <span
     class="prefix-Avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
   />
 </span>
 `;

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

@@ -446,7 +446,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
             >
               <span
                 class="ant-avatar-string"
-                style="transform: scale(1) translateX(-50%);"
+                style="transform: scale(1);"
               >
                 K
               </span>