0

I have a set of progress bars displaying different values in real time. My only problem is that I can't seem to figure out how to keep the number value in the center of the bar, as well as on top at all times. Right now it's being pushed 'ahead' of the blue bar, and disappears when it goes outside the right side of the bar.

Here's how it looks: enter image description here

Markup:

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

And my css 'gridSpan':

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

The first of the three spans is the one that displays the number value inside the bar. Any suggestions how I can keep this centered at all times, and not pushed in front of the blue filler with a huge margin?

4

2 回答 2

2

Do something like the following:

FIDDLE

The outer element has text-align:center

The gridSpan element has display:inline-block (not absolutely positioned)

The inner element (with the blue % progress) needs to be absolutely positioned, so as not to be effected by the text-align:center.

Markup:

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

Alternatively, if you knew the width of the value you could do this by adding display:block;left:0;right:0 and margin:0 auto to your class:

.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)*/
}
于 2013-07-25T08:08:44.443 回答
0

Actually, I finally figured this out based on this fiddle: http://jsbin.com/apufux/2/edit (Wonder why I've never seen this post before!?)

Seems that I was missing some style overrides to the .bar and .progress part:

   .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%
    }

Anyways, thanks for your effort! :)

于 2013-07-25T08:17:13.353 回答