Vertical align center text along with the progress bar - css

Question

I tried to reduce the height of bootstrap's progress bar but the issue is how can I make it in the center vertically same line as the text beside it. You can see the below sample with a reduced height progress bar that has a margin like or empty space below it.
.progress-num {
float: left;
margin-right: 1em;
}
.progress {
height: 0.5em !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</td>
</tr>
</table>

Answer 1

Or just wrap the text and the bar in a containing element:
<table class="table">
<tr>
<td>
<div class="progress-stuff">
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</div>
</td>
</tr>
</table>
And the CSS (no need for magic numbers for margins):
.progress-stuff {
display: flex;
align-items: center; /* ensure all elements vertically aligned */
}
.progress-num {
margin-right: 1rem;
}
.progress {
flex: 1; /* ensure bar fills remaining horizontal space */
}

Answer 2

Just setting using margin-top
.progress-num {
float: left;
margin-right: 1em;
}
.progress {
height: 0.5em !important;
margin-top: 7px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<span class="progress-num">8/10</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span class="sr-only"></span>
</div>
</div>
</td>
</tr>
</table>

Answer 3

You can also embed the text within the progress bar, in case you do not insist on having a height of 0.5em. Just remove the class sr-only from your inner span element and move the text 8/10 to that element. There is no need for adjusting the text then, because it will always be within the progress bar.
You can even omit the inner span completely, if you do not want to apply any additional styling. I kept it in my code snippet, because it keeps the code more structured:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr>
<td>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
<span>8/10</span>
</div>
</div>
</td>
</tr>
</table>
In ANY case, even if you keep your label outside of the progress bar, fill the <span class="sr-only"></span> with content, e.g. <span class="sr-only">8/10</span>. The sr-only stands for screenreader-only, i.e. visitors with visual impairments rely on the text within that element!
Even though you cannot see it on screen, other people need that information in order to tell, how far the action progressed.