jquery - 在进度条中居中文本

Question

我制作了一个进度条，它将在中间显示当前状态。

我创建了一个代码笔来说明我的问题:https://codepen.io/litari/pen/XBrgOO

我尝试过使用 display 属性和 z-index 进行各种操作，但未能使其正常工作。

我希望文本在进度条的顶部保持垂直和水平居中。提前致谢。

诚实的人。如果您要对我的问题投反对票，请至少评论一下为什么 <.<

Answer 1

要使您的文本在任何大小的进度条的水平轴和垂直轴上居中，您可以使用 #progress-bar position:relative 和 # progress-text 像这样:

#progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

请参阅下面的代码片段以获取完整的代码和结果。

function move() {
    var elem = document.getElementById("progress"); 
    var width = 1;
    var id = setInterval(frame, 10);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }
}

#uploaded-file{
  display: flex;
  flex-direction: row;
  height: 40px;
  margin-top: 10px;
}

#file-name{
  margin-top: 10px;
  margin-right: 5px;
}
#progress-bar{
  flex-grow: 1;
  background-color: lightgrey;
  border: 1px solid black;
  position: relative;
}
#progress{
  width: 0%;
  height: 38px;
  background-color: green;
}
#progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


#uploaded-file2{
  display: flex;
  flex-direction: row;
  height: 40px;
  margin-top: 10px;
}

#file-name2{
  margin-top: 10px;
  margin-right: 5px;
}
#progress-bar2{
  flex-grow: 1;
  background-color: lightgrey;
  border: 1px solid black;
}
#progress-text2{
  margin-left:45%;
  margin-top:10px;
}

<h1>This is what it looks like now: </h1>
<div id="uploaded-file">
  <div id="file-name">test.xslx</div>
  <div id="progress-bar">
    <div id="progress">
    </div>
    <div id="progress-text">SomeStatus</div>
  </div>
</div>
<br/>
<button onclick="move()">Click Me</button> 

<h1> this is how I want it to look: </h1>
<div id="uploaded-file2">
  <div id="file-name2">test.xslx</div>
  <div id="progress-bar2">
    <div id="progress-text2">SomeStatus</div>
  </div>
</div>