Html 无法在Ionic中使用进度条<；部门>；标签

我在爱奥尼亚制作进度条，为此我添加了2个div，但问题是，我想根据百分比显示中间的文本和背景色，但这并没有发生

这是我的html：

<div class="mydiv2">
      <div class="mydiv21">60%</div>
</div>

div.mydiv2 {
    border: 1px solid #4f1a86;
    text-align: center;
    color: #ffffff;
}

div.mydiv21 {
    padding: 11px;
    width: 60%;
    background: #4f1a86;
}

输出如下：

问题是文本没有放在中间。我只希望背景像这样

非常感谢您的帮助。

如果您能将“60%”包装在一个范围内，您可以执行以下操作。 外部

mydiv2

获取

position:relative

作为带有百分比的范围的参考

span获取

位置：绝对值

，并将自身定位在mydiv2上。要获取mydiv2的宽度和高度，它将获取顶部、右侧、底部和左侧的位置

flexbox用于将文本内容居中（60%）

div.mydiv2{
边框：1px实心#4f1a86；
颜色：#ffffff；
位置：相对位置；
}
div.mydiv21>span{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
部门mydiv21{
填充：11px；
宽度：60%；
背景#4f1a86；
}

60%

我认为您希望这样，如果是，那么您只需将位置添加为span:absolute；如下所示：-

div.mydiv2{
边框：1px实心#4f1a86；
文本对齐：居中；
颜色：#ffffff；
位置：相对位置；
}
部门mydiv21{
填充：20px 11px；
宽度：60%；
背景#4f1a86；
线高：10px；
}
div.mydiv2 span{位置：绝对；左：0px；右：0px；}

60%

您正在mydiv21的中心添加文本。你想让它在mydiv2的中心吗？@BidhanMajhi。我希望文本位于mydiv2的中心，背景仅此而已。谢谢您的回答。您已经发布了2个相同的答案。@Raghav欢迎，顺便说一句，由于网络问题，其回答了两次。