在div中居中

Question

我有一个进度框，我想将“标题”对准中心。

我认为盒子本身很简单：

<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>

标题的CSS：

.progress-label {
color: #000;
position: absolute;
top: 2px;
font-weight: bold;
}

添加text-align:center; 或margin:0 auto; 等似乎不起作用。 加Left:33%; 确实使它大致居中，但并非适用于所有屏幕宽度。

有人可以指出我做错了吗？

jsfiddle在这里

谢谢。

Answer 1

移除position: absolute; top: 2px; position: absolute; top: 2px; 使它居中。

工作演示

Answer 2

为什么该div绝对定位？ 只需删除position: absolute; 然后text-align: center; 将按预期工作。

Answer 3

尝试移除位置：绝对

.progress-label {
 color: #444;
 top: 2px;
 font-weight: bold;
 text-align:center;
}

Answer 4

只需在主div中添加此样式

.progressBox {
     position: absolute;
     left: 50%;
     margin-left: -50px;    
 }

工作演示http://jsfiddle.net/e7CEK/9/