ng-bootstrap 1.0 - 进度条居中值

Question

我们正在使用ng-bootstrap的进度条，并希望将值文本置于整个栏中心，而不是将其置于绿色进度区中心。

编辑：我的意思是，需要红框所在的值。

到目前为止我所得到的是以下内容，但无效：

.progress-text {
    color: #000;
    font-weight: 700;
    position: absolute;
    display: block;
    width: 100%;
}

<ngb-progressbar type="success" showValue="false" [value]="data?.progress" [striped]="false" [animated]="false">
    <span class="progress-text">{{data?.progress}}%</span>
</ngb-progressbar>

关于我做错的任何想法？

Answer 1

这是您在这种情况下需要的自定义CSS（我最初误解了您的要求）：

＆＃13;

＆＃13;

.progress-text {
    color: #000;
    font-weight: 700;
    position: absolute;
    display: block;
    left: 49%; /* just in case calc is unavailable in a browser */
    left: calc(50% - 12px);
}

＆＃13;

＆＃13;

＆＃13;

这是一个有效的例子：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<style>
.progress-text {
    color: #000;
    font-weight: 700;
    position: absolute;
    display: block;
    left: 49%; /* just in case calc is unavailable in a browser */
    left: calc(50% - 12px);
}
</style>

<div class="container">
    <div class="row">
        <div class="col">
            <div class="progress mt-5">
                <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                    <span class="progress-text">25%</span>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;