CODEWITHSUNDEEP
jqueryhtmlcssstyling
Johan Hjalmarsson
Johan Hjalmarsson

Reputation: 3493

Center text in progressbar

I've made a progress-bar that's gonna display the current status in the middle.

I've created a codepen that illustrates my problem: https://codepen.io/litari/pen/XBrgOO

I've tried various things with display property and z-index, but I've not managed to get it working properly.

I want the text to stay centered both vertically and horizontally, on top of the progress-bar. Thanks in advance.

Honestly people. If you're gonna downvote my question, at least comment on why <.<

Upvotes: 0

Views: 1333

Answers (6)

ruchika jain
ruchika jain

Reputation: 160

Added this and it's working fine

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

Upvotes: 0

Starfish
Starfish

Reputation: 3574

To make your text centered in the horizontal and vertical axis in any sized progress bar you could make the #progress-bar position:relative and the #progress-text like this:

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

See this snippet below for the complete code + results.

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>

Upvotes: 2

Parth Shah
Parth Shah

Reputation: 411

Try this html with css

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

Upvotes: 1

Natwar
Natwar

Reputation: 13

Add the following piece of code in your CSS file.

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

It should do the job.

Upvotes: 0

Martin
Martin

Reputation: 475

Try giving your progress-bar element a relative position and your progress-text element an absolute position. Then what you can do is play with the left and right css properties to get it centered, or simply give it right: 0, left: 0 and text-align:center

Upvotes: 1

bhansa
bhansa

Reputation: 7514

You can give position: relative; to your progress-bar and use: 

#progress-bar{
  position: relative;
}

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

Also instead of id's for text, better to use classes if all other progress-text will have similar styles.

Upvotes: 1

Related Questions