Javascript 进度条上的文本中心

我试图把百分比总数放在彩色进度条的中心，但我很难做到这一点

我已经尝试过将

标记放在不同的

标记中，但没有完全解决

有人能帮忙吗

//页面加载时。。。
moveProgressBar（）；
//在浏览器上调整大小。。。
$（窗口）。调整大小（函数（）{
moveProgressBar（）；
});
//签名进度
函数moveProgressBar（）{
console.log（“moveProgressBar”）；
var getPercent=（$（'.progress wrap'）.data（'progress-percent'）/100）；
var getProgressWrapWidth=$（'.progress wrap'）.width（）；
var progressTotal=getPercent*getProgressWrapWidth；
var animationLength=1000；
//在页面加载时，将百分比栏设置为数据百分比长度的动画
//.stop（）用于防止动画排队
$（'.progress bar'）.stop（）.animate({
左：总计
}，动画长度）；
}

。进度大小{
宽度：100%；
高度：50px；
}
.进度总结{
边框：1px实心#FFFFFF；
背景：#3498DB；
高度：50px；
边际：0px0；
溢出：隐藏；
位置：相对位置；
}
.进度条{
背景：ddd；
左：0；
位置：绝对位置；
排名：0；
}
.进度价值{
垂直对齐：中间对齐；
线高：50px；
左侧填充：20px；
}

25%

您只需将文本绝对定位在条内，然后将右侧设置为100减去百分比：

//页面加载时。。。
moveProgressBar（）；
//在浏览器上调整大小。。。
$（窗口）。调整大小（函数（）{
moveProgressBar（）；
});
//签名进度
函数moveProgressBar（）{
console.log（“moveProgressBar”）；
var getPercent=（$（'.progress wrap'）.data（'progress-percent'）/100）；
var getProgressWrapWidth=$（'.progress wrap'）.width（）；
var progressTotal=getPercent*getProgressWrapWidth；
var animationLength=1000；
//在页面加载时，将百分比栏设置为数据百分比长度的动画
//.stop（）用于防止动画排队
$（'.progress bar'）.stop（）.animate({
左：总计
}，动画长度）；
$（'.progress value'）.stop（）.animate({
右：100-$（'.progress wrap'）。数据（'progress-percent'）+'%
}，动画长度）；
}

。进度大小{
宽度：100%；
高度：50px；
}
.进度总结{
边框：1px实心#FFFFFF；
背景：#3498DB；
高度：50px；
边际：0px0；
溢出：隐藏；
位置：相对位置；
}
.进度条{
背景：ddd；
左：0；
位置：绝对位置；
排名：0；
}
.进度价值{
线高：50px；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：100%；
文本对齐：居中；
保证金：0；
溢出：隐藏；
}

25%

您不需要在此处定位。只需将

.progress value

元素放入包装器，并使用

padding left

属性来设置百分比值的动画。要使该值居中，您可以使用偏移量和总进度值的一半：

（progressTotal-15）/2

以下是工作示例：

//页面加载时。。。
moveProgressBar（）；
//在浏览器上调整大小。。。
$（窗口）。调整大小（函数（）{
moveProgressBar（）；
});
//签名进度
函数moveProgressBar（）{
console.log（“moveProgressBar”）；
var getPercent=（$（'.progress wrap'）.data（'progress-percent'）/100）；
var getProgressWrapWidth=$（'.progress wrap'）.width（）；
var progressTotal=getPercent*getProgressWrapWidth；
var animationLength=1000；
//在页面加载时，将百分比栏设置为数据百分比长度的动画
//.stop（）用于防止动画排队
$（'.progress bar'）.stop（）.animate({
左：总计
}，动画长度）；
$（'.progress value'）.stop（）.animate({
填充左：（总进度-15）/2
}，动画长度）；
}

。进度大小{
宽度：100%；
高度：50px；
}
.进度总结{
边框：1px实心#FFFFFF；
背景：#3498DB；
高度：50px；
边际：0px0；
溢出：隐藏；
位置：相对位置；
}
.进度条{
背景：ddd；
左：0；
位置：绝对位置；
排名：0；
}
.进度价值{
左侧填充：10px；
}

25%

请检查，希望这对您有所帮助

25%

在整件事的中心，还是只是彩色部分？在彩色部分的中心。我没有投反对票，我发现你的答案和我的一样有用。我喜欢的是，价值观首先停留在左边。憎恨者总是会憎恨。。。但是，是的，这是朝着正确方向迈出的一步。我也喜欢对新贡献者的提示。无论如何谢谢你的回答/时间，祝你度过愉快的一天！

<div class="progress-wrap" data-progress-percent="25">
  <div class="valuetext">25%</div>
  <div class="progress-bar progress-value progress-size"></div>
</div>