Ошибка выравнивания CSS

Question

Это один из тех гуру CSS, который существует там ...

Я пытаюсь правильно и эффективно выравнивать элементы этого индикатора выполнения. Посмотри на него здесь:

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

Это выглядит хорошо, однако, я застрял с выравниванием этих ярлыков, и мой CCS становится слишком сложным и не эффективным. Меня особенно беспокоит top: 4px; в строке 47, которая является абсолютной ссылкой, в то время как она должна быть относительной. Я не доволен кодом CSS #min в строках 21-26, но я не смог найти лучший способ удержать панель от левой метки.

Вот 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; 
}