From 7a9055a03fb37479151374ef743b55289c7cc673 Mon Sep 17 00:00:00 2001
From: "fengzhihao.infeng" <fengzhihao.infeng@bytedance.com>
Date: Wed, 9 Sep 2026 21:27:19 +0800
Subject: [PATCH] fix: center image captions when the total counter is visible

---
 src/ViewerToolbar.tsx | 15 +++++++++------
 src/style/index.less  | 23 ++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/ViewerToolbar.tsx b/src/ViewerToolbar.tsx
index df35460f..974ce15b 100644
--- a/src/ViewerToolbar.tsx
+++ b/src/ViewerToolbar.tsx
@@ -120,15 +120,18 @@ export default function ViewerToolbar(props: ViewerToolbarProps) {
       </li>
     );
   }
+  const totalLabel = `${props.activeIndex + 1} ${props.totalName} ${props.count}`;
   let attributeNode = props.attribute ? (
-    <p className={`${props.prefixCls}-attribute`}>
-      {props.alt && `${props.alt}`}
-      {props.noImgDetails || <span className={`${props.prefixCls}-img-details`}>
-        {`(${props.width} x ${props.height})`}
-      </span>}
+    <p className={`${props.prefixCls}-attribute`} data-total={props.showTotal ? totalLabel : undefined}>
+      <span className={`${props.prefixCls}-caption`}>
+        {props.alt && `${props.alt}`}
+        {props.noImgDetails || <span className={`${props.prefixCls}-img-details`}>
+          {`(${props.width} x ${props.height})`}
+        </span>}
+      </span>
       {props.showTotal
         && <span className={`${props.prefixCls}-showTotal`}>
-          {`${props.activeIndex + 1} ${props.totalName} ${props.count}`}</span>}
+          {totalLabel}</span>}
     </p>
   ) : null;
   let toolbars = props.toolbars;
diff --git a/src/style/index.less b/src/style/index.less
index 0bc053f4..e27f0561 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -117,6 +117,8 @@
   }
 
   &-attribute {
+    display: flex;
+    align-items: center;
     margin: 0 20px;
     margin-bottom: 6px;
     opacity: .8;
@@ -124,8 +126,27 @@
     font-size: 15px;
   }
 
+  // Match the counter's width on the left without duplicating visible text.
+  &-attribute[data-total]::before {
+    content: attr(data-total);
+    visibility: hidden;
+    margin-right: 8px;
+  }
+
+  &-attribute[data-total]::before, &-showTotal {
+    flex: 0 0 auto;
+    max-width: 25%;
+    word-wrap: break-word;
+  }
+
+  &-caption {
+    flex: 1;
+    min-width: 0;
+    word-wrap: break-word;
+  }
+
   &-showTotal {
-    float: right;
+    margin-left: 8px;
   }
 
   @toolbarHeight: 28px;