Question

我有一组进度条实时显示不同的值。我唯一的问题是我似乎无法弄清楚如何将数值保持在条形图的中心，以及始终在顶部。现在，它被推到蓝色条的“前方”，当它越过酒吧的右侧时消失。

以下是它的外观： enter image description here

标记：

<td class="gridTableCell">
    <div style='position: relative' class='progress progress-info'>
        <div class='bar' id='signalRdepthRangePercentage-#:ViewUnitContract.ConveyanceId #' style='width: #: DepthRangePercentage#%'>
        </div>
        <span class='gridSpan' id='signalRdepth-#:ViewUnitContract.ConveyanceId #'>#: ViewUnitContract.CurrentRun.LatestWellLogEntry.Depth#</span>
        <span class='hidden' id='signalRMaxDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MaxDepthRange#</span>
        <span class='hidden' id='signalRMinDepthRange-#:ViewUnitContract.ConveyanceId #'>#: MinDepthRange#</span>
    </div>
</td>

我的CSS'gridSpan'：

.gridSpan {
    position: absolute;
    top: 0px;
    z-index: 2;
    text-align: center;
    color: #676767;
    width: 100%
}

三个跨度中的第一个是显示栏内数字值的跨度。有什么建议我怎么能一直保持这个中心，而不是在蓝色填充物前面以巨大的差距推进？

Answer 1

执行以下操作：

<强> FIDDLE

外部元素有text-align：center

gridSpan元素有display：inline-block（非绝对定位）

内部元素（蓝色％进度）需要绝对定位，以免受text-align：center的影响。

标记：

<div class="outer">
    <span class="inner"></span>
    <span class="gridSpan">9048.343</span>
</div>

CSS

.outer
{
    width: 70%;
    margin:20px;
    height: 30px;
    border: 1px solid gray;
    overflow: hidden;
    border-radius: 15px;
    position:relative;
    text-align: center;
}
.inner
{
    background: aqua;
    display:inline-block;
    position:absolute;
    left:0;
    width: 20%;
    height: 30px;
}
.gridSpan {
     display:inline-block;
     margin-top: 5px;
     color: #676767;
     position: relative;
     z-index:2;
}

或者，如果您知道值的宽度，则可以通过向您的班级添加display:block;left:0;right:0和margin:0 auto来实现此目的：

.gridSpan {
 display:block;
 position: absolute;
 margin: 0 auto;
 top: 0px;
 left:0;
 right:0;
 z-index: 2;
 color: #676767;
 width: x px; /*(width of value)*/
}

Answer 2

实际上，我终于根据这个小提琴想出了这个： http://jsbin.com/apufux/2/edit（不知道为什么我以前从未见过this post！）

似乎我错过了.bar和.progress部分的一些样式覆盖：

   .progress {
        position: relative;
    }

    .bar {
        z-index: 1;
        position: absolute;
    }

    .progress span {
        position: absolute;
        top: 0px;
        z-index: 2;
        text-align: center;
        color: #676767;
        width: 100%
    }

无论如何，谢谢你的努力！：）

如何将进度条编号值保持在中心位置？

2 个答案:

标记：

CSS