div中的中心文字

我有一个进度框，我想对齐中心的'标题'。div中的中心文字

盒子本身我觉得是相当直截了当：

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

谢谢。

来源

2014-02-27 Jake

删除position: absolute; top: 2px;使其成为中心。

A working demo

来源

2014-02-27 02:21:00 TrungDQ

哇..这么简单..谢谢，完美的工作。 – Jake

不客气。只需要了解更多关于CSS位置属性的信息，并且可以通过对齐元素来修复相关问题：http://www.w3schools.com/cssref/pr_class_position.asp – TrungDQ

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

来源

2014-02-27 02:21:12

尝试删除的位置是：绝对

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

来源

2014-02-27 02:23:25

只是在主要DIV

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

添加这种风格的工作演示http://jsfiddle.net/e7CEK/9/

来源

2014-02-27 02:26:22 user3282202

div中的中心文字

回答

相关问题