如何将HTML进度条上的可变宽度动态文本与填充边缘居中对齐

要实现数字文本中心点与进度条填充边对齐，只需要给浮动的数字标签添加基于自身宽度的左偏移即可，CSS的transform: translateX(-50%)刚好满足需求：translate的百分比取值是相对于元素自身的宽度计算的，不需要额外获取文本宽度，不管文本长度多少都能自动居中对齐。

修改点 #

找到Calculate函数中生成进度条数字的那行代码，给标签的style属性新增transform: translateX(-50%);规则即可，修改后的代码片段如下：

Output += "<td style='border: 1px solid white; width: 300px; height: 10px; background-image: linear-gradient(to right, rgb(0, 127, 0) " + PercentageWithinBatch.toString(10) + "%, rgb(0, 127, 0) " + PercentageWithinBatch.toString(10) + "%, rgba(0, 127, 0, 0.5) " + PercentageWithinBatch.toString(10) + "%);'><kbd style='position: relative; left: " + PercentageWithinBatch.toString(10) +  "%; top: 15px; transform: translateX(-50%);'>" + InputValue.toString(10) + "</kbd></td>"

完整修复后的代码 #

<html>
    <head>
        <style>
            html {
            background-color: black;
            color: white;
            font-family: sans-serif;
            }
            
            span.NoLineBreak {
                white-space: nowrap;
            }
            
            abbr{cursor: help;}
            img.img-hor {
                -moz-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
                filter: FlipH;
                -ms-filter: "FlipH";
            }
        </style>
    </head>
<div align="center">
<body onload="Initialize()">
已处理URL总数：<input type="number" min="0" max="50000" value="" onchange="Calculate()" id="Input"> <button onclick="Initialize()">重置</button><br><br>
<span id="Output"></span>
</div>
</body>
<script>
    function Initialize() {
        document.getElementById("Input").value = "1"
        document.getElementById("Input").focus()
        Calculate()
    }
    function Calculate() {
        const BatchSize = 80n //每次更新前处理的URL数量
        const MaxURLs = 50000n //最大处理URL数量
        var Output = ""
        var InputValue = BigintClamp(CorrectDecBigIntValue(document.getElementById("Input").value), 1n, MaxURLs)
        document.getElementById("Input").value = InputValue.toString(10)
        var QuotientResult = InputValue/BatchSize //BigInt自动向下取整，可通过floor(x/m)*m实现指定步长取整
        var ModResult = InputValue % BatchSize
        var RemainingLeft = BatchSize - ModResult
        var LowerInterval = QuotientResult * BatchSize
        var UpperInterval = LowerInterval + BatchSize
        var PercentageWithinBatch = (Number(ModResult) * 100/Number(BatchSize))

        Output += "<table>"
        Output += "<tr ><td style='padding: 10px'><kbd>已处理URL数：</kbd></td><td align='right'><kbd>" + InputValue.toString(10) + "</kbd></td></tr>"
        Output += "<tr ><td style='padding: 10px'><kbd>所属区间：</kbd></td><td align='right'><kbd>" + LowerInterval.toString(10) + "-" + UpperInterval.toString(10)
        Output += "<tr ><td style='padding: 10px'><kbd>当前" + BatchSize.toString(10) + "区间内已处理URL数：</kbd></td><td align='right'><kbd>" + ModResult.toString(10) + "/" + BatchSize.toString(10) + " (" + PercentageWithinBatch.toFixed(0) + "%)</kbd></td></tr>"
        Output += "<tr ><td style='padding: 10px'><kbd>距下次更新剩余URL数：</kbd></td><td align='right'><kbd>" + RemainingLeft.toString(10) + "</kbd></td></tr>"
        Output += "</table>"
        
        Output += "<table>"
        Output += "<tr>"
        Output += "<td align='right'><kbd>" + LowerInterval.toString(10) + "</kbd></td>"
        Output += "<td style='border: 1px solid white; width: 300px; height: 10px; background-image: linear-gradient(to right, rgb(0, 127, 0) " + PercentageWithinBatch.toString(10) + "%, rgb(0, 127, 0) " + PercentageWithinBatch.toString(10) + "%, rgba(0, 127, 0, 0.5) " + PercentageWithinBatch.toString(10) + "%);'><kbd style='position: relative; left: " + PercentageWithinBatch.toString(10) +  "%; top: 15px; transform: translateX(-50%);'>" + InputValue.toString(10) + "</kbd></td>"
        Output += "<td align='left'><kbd>" + UpperInterval.toString(10) + "</kbd></td>"
        Output += "</tr></table></div>"
        document.getElementById("Output").innerHTML = Output
    }


    function CorrectDecBigIntValue(String) {
        //将用户输入的十进制字符串（不允许负数）转换为BigInt
        if ((/^([0-9])+$/).test(String) == false) {
            String = 0n
        }
        return CanConvertHexStringToBigInt = BigInt(String)
    }
    function BigintClamp(num, min, max) {
        //将数值限制在指定范围内，BigInt版本
            return num <= min ? min : num >= max ? max : num;
    }
</script>

原理说明 #

• left: 百分比是相对于父元素（进度条容器）的宽度计算，刚好把文本的左边缘定位到进度条填充位置
• transform: translateX(-50%)是相对于文本元素自身的宽度计算，向左偏移自身宽度的一半，刚好让文本的中心点与之前定位的左边缘位置重合，完美实现自适应居中对齐。

内容的提问来源于stack exchange，提问作者AAsomb113