Html 在进度条中居中显示文本

我希望进度条中的标签在灰色条（100%）中居中，而不是在绿色条中居中

以下是我迄今为止所做的尝试：

#进度条{
文本对齐：居中；
背景颜色：浅灰色；
填充：3倍；
}
#进度条>分区{
背景色：#B3D8A9；
高度：20px；
}
.进度标签{
字体大小：.9em；
位置：绝对；
}

75%

使用

位置：相对
表示
#进度条


#进度条{
背景颜色：浅灰色；
填充：3倍；
位置：相对位置；
}
#进度条>分区{
背景色：#B3D8A9；
高度：20px；
}
.进度标签{
字体大小：.9em；
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
}


75%
首先，你搞错了

positsion: absolute;

它应该是位置：绝对

然后，如果要将标签中心设置为灰色条，则需要在#progressbar中添加位置：relative


#进度条{
文本对齐：居中；
背景颜色：浅灰色；
填充：3倍；
位置：相对位置；
}
#进度条>分区{
背景色：#B3D8A9；
高度：20px；
}
.进度标签{
字体大小：.9em；
位置：绝对位置；
保证金：0；
左：0；
右：0；
最高：50%；
转化：translateY（-50%）；
}

75%
无论如何，我不会将文本嵌套在“内部”进度条中：


#进度条
{
位置：相对位置；
宽度：250px；
高度：30px；
背景颜色：灰色；
}
#进度，#进度百分比{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
#进度百分比{
文本对齐：居中；
z指数：2；
线高：30px；
}
#进展{
z指数：1；
背景颜色：绿色；
宽度：50%；
}

进度：100%
这可能有助于解决您的问题


#进度条{
位置：相对位置；
文本对齐：居中；
背景颜色：浅灰色；
填充：3倍；
}
#进度条>分区{
背景色：#B3D8A9；
高度：20px；
}
.进度标签{
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
字体大小：.9em；
保证金：0；
高度：26px；
}

75%
< /代码>正在将元素移动到外部div？您有一个简单的语法错误，您可能会考虑使用DON-POST的答案，这仅仅是关于如何修复语法错误。如果这是修复的话，您应该投票关闭这样的（键入错误）。@ Bobtroopo，也有一些其他的变化。你可以检查答案。@Rob你可以看到他的问题和张贴的代码。标签不在灰色框的中心。