I have a progress box that I would like to align the 'heading' in the center.
The box itself I think is fairly straight forward:
<div id="progressContainer" class="progressBox">
<div id="pbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="1">
<div class="progress-label">
Step 1 of 4
</div>
<div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: 1%;">
</div>
</div>
<ul id="progress">
<li id="step0" class="current">Details <span></span></li>
<li id="step1">Details<span></span></li>
<li id="step2">Details<span></span></li>
<li id="step3">Details<span></span></li>
</ul>
</div>
The css for the heading:
.progress-label {
color: #000;
position: absolute;
top: 2px;
font-weight: bold;
}
adding text-align:center;
or margin:0 auto;
etc do not seem to work. Adding Left:33%;
does make it roughly centered but not for all screen widths.
Could someone point out what I am doing wrong?
thanks.
Remove position: absolute; top: 2px;
position: absolute; top: 2px;
to make it center.
Why is that div absolutely positioned? Just remove position: absolute;
and then text-align: center;
will work as expected.
Try remove position:absolute
.progress-label {
color: #444;
top: 2px;
font-weight: bold;
text-align:center;
}
just add this style in the main div
.progressBox {
position: absolute;
left: 50%;
margin-left: -50px;
}
Working demo http://jsfiddle.net/e7CEK/9/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.