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