fix: Fix WebVTT position handling in UITextDisplayer (#9017)

Fixes https://github.com/shaka-project/shaka-player/issues/8948

lib/text/ui_text_displayer.js

@@ -640,6 +640,7 @@ shaka.text.UITextDisplayer = class {
    * See https://www.w3.org/TR/webvtt1/#webvtt-cue-position-alignment
    *
    * @param {!shaka.text.Cue} cue
+   * @return {!shaka.text.Cue.positionAlign}
    * @private
    */
   computeCuePositionAlignment_(cue) {
@@ -873,6 +874,12 @@ shaka.text.UITextDisplayer = class {
     // The positionAlign attribute is an alignment for the text container in
     // the dimension of the writing direction.
     const computedPositionAlign = this.computeCuePositionAlignment_(cue);
+    // According to the W3C WebVTT specification
+    // See: https://www.w3.org/TR/webvtt1/#webvtt-cue-position
+    // The position of the cue box depends on the cue alignment.
+    //   If align: start, then the position specifies the left edge.
+    //   If align: center, then it specifies the center of the cue box.
+    //   If align: end, then it refers to the right edge.
     if (computedPositionAlign == Cue.positionAlign.LEFT) {
       style.cssFloat = 'left';
       if (cue.position !== null) {
@@ -904,6 +911,9 @@ shaka.text.UITextDisplayer = class {
         } else {
           style.top = cue.position + '%';
         }
+        if (cue.size) {
+          style.transform = 'translateX(-50%)';
+        }
       }
     }