bootstrap-4 - 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(我最初误解了您的要求):

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

这是一个有效的示例:

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