Question

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

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

我已经尝试过使用display属性和z-index进行各种操作，但是我没有设法使其正常工作。

我希望文本在进度条上方保持垂直和水平居中。预先感谢。

老实说。如果您不赞成我的问题，请至少评论为什么<。<< / strong>

Answer 1

您可以将position: relative;赋予progress-bar并使用：

#progress-bar{
  position: relative;
}

#progress-text{
  position: absolute;
  top: 8px;
  left: 45%;
}

如果所有其他progress-text都具有相似的样式，则最好使用类代替文本的id。

Answer 2

尝试将progress-bar元素赋予相对位置，将progress-text元素赋予绝对位置。然后，您可以做的就是使用左右css属性来使其居中，或者简单地将其赋予right: 0，left: 0和text-align:center

Answer 3

使用CSS尝试此html

<div id="progress-bar">
    <span id="progress-text" style="position: absolute; padding: 10px 0;">SomeStatus</span>
    <div id="progress"></div>
  </div>

Answer 4

要使您的文本在任何大小的进度栏中以水平和垂直轴为中心，可以使#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>

Answer 5

在您的CSS文件中添加以下代码。

#progress-text{
  margin-left:45%;
  margin-top:-27px;
}

它应该完成工作。

Answer 6

添加了它，并且工作正常

#progress-text{
  text-align: center;
  margin: -27px 0px 0px 0px;
}

在进度栏中居中显示文字

6 个答案: