代码之家 › 专栏 › 技术社区 › Johan Hjalmarsson

使文本在进度栏中居中

styling css html jquery

-1

Johan Hjalmarsson · 技术社区 · 7 年前

我做了一个进度条,显示中间的当前状态。

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

我试过各种各样的东西 display 财产和 z-index 但我没能让它正常工作。

我希望文本在进度条顶部垂直和水平居中。事先谢谢。

诚实的人。如果你要否决我的问题,至少要评论一下为什么<<

6 回复 | 直到 7 年前

bhansa 7 年前

你可以给 position: relative; 给你的 progress-bar 使用方法:

#progress-bar{
  position: relative;
}

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

此外,如果所有其他类都是文本,则最好使用类,而不是文本的ID progress-text 会有相似的风格。

Martin 7 年前

试着给你 progress-bar 元素A相对位置和 progress-text 元素绝对位置。那么,您可以使用左右CSS属性使其居中,或者简单地赋予它 right: 0 ,请 left: 0 和 text-align:center

Parth Shah 7 年前

用CSS试试这个HTML

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

Starfish 7 年前

要使文本在任何大小的进度条的水平轴和垂直轴上居中,可以使 #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>

Natwar 7 年前

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

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

它应该完成这项工作。

MichaÅ Turczyn 7 年前

加上这个,工作正常

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