无法使用<div>标签

Question

我正在Ionic中制作进度条，为此我添加了2个div，但问题是，我想根据百分比在中间显示文本和背景色，但这没有发生。 / p>

这是我的 html ：

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

这是我的 css ：

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

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

输出为：

问题在于文本不在中间。我只希望背景像这样。

非常感谢您的帮助。

Answer 1

如果您可以将“ 60％”包裹在一个范围内，则可以执行以下操作。 外部mydiv2得到position: relative作为百分比的范围的参考。

该范围将获得position: absolute并将其自身定位在mydiv2上。为了获得mydiv2的宽度和高度，它获得了顶部，右侧，底部和左侧的位置。

flexbox将文本内容居中（60％）

div.mydiv2 {
  border: 1px solid #4f1a86;
  color: #ffffff;
  position: relative;
}

div.mydiv21>span {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

Answer 2

我想你想这样，如果是的话，你只需要添加位置为span的位置即可：absolute;如下所示：-

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

div.mydiv21 {
    padding: 20px 11px;
    width: 60%;
    background: #4f1a86;
    line-height: 10px;
}

div.mydiv2 span{ position: absolute; left: 0px; right: 0px;}

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