Question

I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:

<div class="hero-unit">
<div class="container">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 80%;">80%</div>
    </div>
</div>
</div>
​

Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I’ve tried to fix it but had no luck.

Thank you.

Answer 1

It is the line-height: 30px on hero-unit which causes the problem.

I’ve change the code like this:

<div class="hero-unit" style="line-height: inherit">

Of course it is better to assign a class to it, instead of using the style attribute.