css - CSS对齐问题

Question

这个是为那些 CSS 大师准备的……

我正在尝试正确有效地对齐此进度表的元素。看看这里：

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

看起来不错，但是，我坚持使用这些标签的对齐方式，并且我的 CCS 变得过于复杂且效率不高。我特别担心top: 4px;in line47是绝对参考，而应该是相对参考。#min我对行中的 CSS 代码也不满意，21-26但我找不到更好的方法来让栏远离左侧标签。

这是供您检查的jsfiddle：

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

我将不胜感激对该 CSS 代码的任何改进；）

Answer 1

这是工作代码：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 2

演示

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

Answer 3

线的一个很好的修复47是：

margin: 4px auto;

请参阅我的JSFiddle。

更短，更漂亮，更干净。