调整字幕渲染逻辑

template_example.html

@@ -119,6 +119,9 @@ body {
 
       6. 文字也支持 width（模板指定 width 可覆盖渲染端的默认宽度，
          精确控制换行范围，如把文字限定在两张图片之间不压图）。
+
+      7. 文字水平对齐支持 text-align: left / center / right
+         （默认 center 居中；写 left 靠左、right 靠右）。
       ======================================================================
   -->
 
@@ -214,7 +217,7 @@ body {
     data-key="product_desc"  产品卖点描述（底部两个图片之间）
 
     最终效果：
-      - 白字，水平居中，落在 product_image_1 与 product_image_2 之间的空隙里
+      - 白字，水平靠左，落在 product_image_1 与 product_image_2 之间的空隙里
       - width: calc(100% - 320px) 让文字宽度随画布自适应，正好落在两图空隙内，
         任何分辨率下都不会压到图片
       - 因为 image_2 图片比较小（比 image_1 矮，只占上面一段），
@@ -247,6 +250,10 @@ body {
     color: #FFFFFF
       文字颜色（白色）
 
+    text-align: left
+      文字水平对齐方式
+      → left = 靠左（本元素默认）  center = 居中  right = 靠右
+
     提示：文字内容里可以用 \n 换行
   -->
   <div data-key="product_desc" data-start="0" data-duration="0" data-track-index="3"
@@ -257,6 +264,8 @@ body {
          width: calc(100% - 320px);
          font-size: 17px;
          color: #FFFFFF;
+         text-align: left;
+         justify-content: flex-start;
        ">产品卖点描述</div>
 
   <!--