CODEWITHSUNDEEP
htmlcss
John Higgins
John Higgins

Reputation: 907

Centering text in a progress bar

I would like the label in the progress bar centered in the grey bar (100%) and not centered in the green bar.

Here is what I tried so far:

#progressbar {
  text-align: center;
  background-color: lightgrey;
  padding: 3px;
}

#progressbar>div {
  background-color: #B3D8A9;
  height: 20px;
}

.progress-label {
  font-size: .9em;
  positsion: absolute;

}
<div id="progressbar">
   <div style="width:75%;">
      <p class="progress-label"><strong>75%</strong></p>
   </div>
</div>

Any help would be appreciated.

Upvotes: 3

Views: 2007

Answers (4)

VSM
VSM

Reputation: 1785

This may be helpful to fix your issue.

#progressbar {
  position: relative; 
  text-align: center;
  background-color: lightgrey;
  padding: 3px;
}

#progressbar>div {
  background-color: #B3D8A9;
  height: 20px;
}

.progress-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: .9em;
  margin: 0;
  height: 26px;
}
<div id="progressbar">
   <div style="width:75%;">
     <p class="progress-label"><strong>75%</strong></p>
   </div>
</div>

Upvotes: 0

Nirav Joshi
Nirav Joshi

Reputation: 2960

First of all you mistake here

positsion: absolute;

it should be position: absolute

After then if you want to make label center to grey bar then you needs to add position: relative at #progressbar

#progressbar {
    text-align: center;
    background-color: lightgrey;
    padding: 3px;
    position: relative;
}

#progressbar>div {
    background-color: #B3D8A9;
    height: 20px;
}

.progress-label {
    font-size: .9em;
    position: absolute;
    margin: 0;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
<div id="progressbar">
   <div style="width:75%;">
      <p class="progress-label"><strong>75%</strong></p>
   </div>
</div>

Upvotes: 3

Titulum
Titulum

Reputation: 11486

I would not nest the text inside the 'inner' progress bar anyway:

#progress-bar
{
  position: relative;
  width: 250px;
  height: 30px;
  
  background-color: gray;
}

#progress, #progress-percentage {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

#progress-percentage {
  text-align: center;
  z-index: 2;
  line-height: 30px;
}

#progress {
  z-index: 1;
  background-color: green;
  width: 50%;
}
<div id="progress-bar">
  <div id="progress-percentage">progress: 100%</div>
  <div id="progress"></div>
</div>

Upvotes: 0

adel
adel

Reputation: 3507

Use position: relative for #progressbar

#progressbar {
    background-color: lightgrey;
    padding: 3px;
    position:relative;
}

#progressbar>div {
    background-color: #B3D8A9;
    height: 20px;
}

.progress-label {
    font-size: .9em;
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);

}


    
<div id="progressbar">
   <div style="width:75%;">
      <p class="progress-label"><strong>75%</strong></p>
   </div>
</div>

Upvotes: 0

Related Questions