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中的中心文字

回答

相關問題