CSS對齊問題

Question

這是一個用於那些CSS大師那裏...

我想對齊這個進度計的元素正確和高效。它到這裏看看：

http://jsfiddle.net/arturo_sanz/UFPnZ/embedded/result/

它看起來不錯，但是，我堅持與定位標籤，而且我的CCS變得過於複雜，效率不高。我特別擔心top: 4px;行47這是一個絕對的參考，而它應該是一個相對的。我不喜歡第21-26行中的#min CSS代碼，但我無法找到一個更好的方法來保持酒吧遠離左標籤。

這裏是的jsfiddle爲您檢查：

http://jsfiddle.net/arturo_sanz/UFPnZ/

我希望到CSS代碼的任何改進;）

Answer 1

一個很好的修復線路47是：

margin: 4px auto; 

請參閱我的JSFiddle。

更短，更漂亮，更乾淨。

Answer 2

這裏是工作代碼：http://jsfiddle.net/3A9kM/2/

更新CSS：

.progress-label { 
    color: #CC0000; 
    display: block; 
    text-align: center; 
    float: left; 
    margin: 4px auto auto; 
    width: 100%; 
} 
/*Removed position: absolute;top:4px;*/ 
/*Added: float: left;margin: 4px auto auto*/ 

乾杯！ :)

Answer 3

DEMO

HTML：

<div id="progbar" class="frame"> 
    <span id="min" class="min-max-label ui-widget">200</span> 
    <span id="progressbar"> 
     <span class="progress-label">Loading...</span> 
    </span> 
    <span id="max" class="min-max-label ui-widget">300</span> 
</div> 

CSS：

#progBar { 
    text-align: center; 
    margin:0 auto; 
} 
#progBar span{ 
    vertical-align: middle; 
    text-align: center; 
    display: inline-block; 
    color: #CC0000; 
} 
#progressbar { 
    position:relative; 
    width: 60%; 
    height: 36px; 
    margin: 0 15px; 
    border-color: #CC0000; 
} 
.ui-progressbar-value { 
    position: absolute; 
    top: 0; 
    background: #CCCCCC url(http://download.jqueryui.com/themeroller/images/ui-bg_highlight-hard_100_cccccc_1x100.png) 50%; 
} 
.progress-label{ 
    position: relative; 
    z-index: 1; 
    top:4px; 
}