时间戳

首页 > 解决方案 > 如何使移位的文本居中？

javascript - 如何使移位的文本居中？

问题描述

这是这个 HTML（复制整个内容，创建一个空白 HTML 文件，然后粘贴它）：

<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()">
Total URLs processed: <input type="number" min="0" max="50000" value="" onchange="Calculate()" id="Input"> <button onclick="Initialize()">Reset</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 //How many URLs before each update.
        const MaxURLs = 50000n //The maximum number of URLs to process.
        var Output = ""
        var InputValue = BigintClamp(CorrectDecBigIntValue(document.getElementById("Input").value), 1n, MaxURLs)
        document.getElementById("Input").value = InputValue.toString(10)
        var QuotientResult = InputValue/BatchSize //BigInt automatically rounds down. By doing floor(x/m)*m you can round to specified increment, see https://en.wikipedia.org/wiki/Rounding#Rounding_to_other_values
        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>URLs processed:</kbd></td><td align='right'><kbd>" + InputValue.toString(10) + "</kbd></td></tr>"
        Output += "<tr ><td style='padding: 10px'><kbd>Range within:</kbd></td><td align='right'><kbd>" + LowerInterval.toString(10) + "-" + UpperInterval.toString(10)
        Output += "<tr ><td style='padding: 10px'><kbd>Number of URLs within each " + BatchSize.toString(10) + " interval:</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>Remaining to next update:</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;'>" + 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) {
        //This converts the user's input decimal string (negative numbers not allowed)
        //to BigInt.
        if ((/^([0-9])+$/).test(String) == false) {
            String = 0n
        }
        return CanConvertHexStringToBigInt = BigInt(String)
    }
    function BigintClamp(num, min, max) {
        //Restrict a number within a specified range, bigInt edition.
            return num <= min ? min : num >= max ? max : num;
    }
</script>

问题是使用该渐变框（这是一个进度条）定位的文本，它的定位是这样的，其中文本的左边缘是数字的放置在进度条的填充边缘：

在此处输入图像描述

如您所见，数字不在条形填充边缘的中心。我想改为这样定位： 在此处输入图像描述

我不知道如何提取孩子的宽度并在父母上使用它来计算其孩子宽度的 50%。<center>...</center> 确实适用于 -50%，但该 HTML 标记已折旧。我还尝试找到使该文本区域的顶部中心成为“原点位置”而不是左上角的方法，但它不起作用（尝试使用变换原点）。

提醒您，文本区域的宽度不是恒定的，可以提交从 1 到 50000 的任何数字，因此其宽度是可变的。我希望这个随杆移动的数字始终居中，无论字符串有多长。

标签： javascriptcss

解决方案

您可以使用position: relative外部元素。元素本身必须是position: absolute. 然后你可以添加transform: translateX(-50%);到中心。

function Initialize() {
    document.getElementById("Input").value = "1"
    document.getElementById("Input").focus()
    Calculate()
}
function Calculate() {
    const BatchSize = 80n //How many URLs before each update.
    const MaxURLs = 50000n //The maximum number of URLs to process.
    var Output = ""
    var InputValue = BigintClamp(CorrectDecBigIntValue(document.getElementById("Input").value), 1n, MaxURLs)
    document.getElementById("Input").value = InputValue.toString(10)
    var QuotientResult = InputValue/BatchSize //BigInt automatically rounds down. By doing floor(x/m)*m you can round to specified increment, see https://en.wikipedia.org/wiki/Rounding#Rounding_to_other_values
    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>URLs processed:</kbd></td><td align='right'><kbd>" + InputValue.toString(10) + "</kbd></td></tr>"
    Output += "<tr ><td style='padding: 10px'><kbd>Range within:</kbd></td><td align='right'><kbd>" + LowerInterval.toString(10) + "-" + UpperInterval.toString(10)
    Output += "<tr ><td style='padding: 10px'><kbd>Number of URLs within each " + BatchSize.toString(10) + " interval:</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>Remaining to next update:</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) + "%);position: relative;'><kbd style='position: absolute; 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) {
    //This converts the user's input decimal string (negative numbers not allowed)
    //to BigInt.
    if ((/^([0-9])+$/).test(String) == false) {
        String = 0n
    }
    return CanConvertHexStringToBigInt = BigInt(String)
}
function BigintClamp(num, min, max) {
    //Restrict a number within a specified range, bigInt edition.
        return num <= min ? min : num >= max ? max : num;
}
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";
}
<html>

<body onload="Initialize()">
  <div align="center">
    Total URLs processed: <input type="number" min="0" max="50000" value="" onchange="Calculate()" id="Input"> <button onclick="Initialize()">Reset</button><br><br>
    <span id="Output"></span>
  </div>
</body>

</html>

推荐阅读