我創建的評分量表有 N具有固定寬度。每個速率都有一個值，該值顯示在相應的div和描述中。
我的問題是描述和相關圖示沒有在div下方居中對齊，而是從左側開始。
<div class="card card-accent-primary">
<div class="card-header text-left">
Rating values
</div>
<div class="card-body">
<div class="col-12 mt-2 mb-1 p-buttonset valore-rating-display justify-content-center">
<div *ngFor="let scala of scalaRating; let i=index" style="width: 5rem">
<div>
<button pButton type="button" label="{{scala.valoreRating}}" class="p-button-outlined cursor-default"
[class.rounded-left]="i == 0" [class.rounded-right]="i == (scalaRating.length - 1)"
style="background-color: {{scala.codColoreValRating}}; color: black; width: 5rem">
</button>
</div>
<div *ngIf="rating == scala.valoreRating" class="position-relative">
<i class="fa fa-caret-up font-weight-bold font-xxlarge"></i>
<div class="position-absolute" style="word-wrap: break-word; left: -1rem">{{scala.descrizioneValRating}}</div>
</div>
</div>
</div>
</div>
</div>
我希望圖示和描述位于影像中心（我用紅色標記了所需位置）：
這里有示例代碼：
uj5u.com熱心網友回復：
沒有彈性布局的解決方案：
- 圖示。添加
text-align: center;到圖示的父 div（相對位置的） - description 添加
left: 50%;transform: translate(-50%, 0);到 description div 以實作居中對齊。如：<div _ngcontent-ghu-c0="" style="word-wrap: break-word;left: 50%;transform: translate(-50%, 0);position: absolute;">F - RISCHIO MEDIO</div>。確保位置相關類具有position:relative;樣式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530742.html
上一篇：為什么，當我從@property值切換到var值時，我的CSS影片行為不正常？
下一篇：如何避免溢位：只有一個元素隱藏？