我尝试重新创建您的屏幕截图,因此这比您需要的代码更多。
对您来说重要的是
.points-value
是 display: grid
并且 .label
位于单元格中。
我还用 .label
将 display: flex; justify-content: center; align-items: center;
的内容居中,并用 position: absolute;
将数字放在圆圈上
.points-value {
width: 200px;
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: 1fr;
}
.label {
display: flex;
grid-column: 1 / 1;
justify-content: center;
align-items: center;
}
.label .points-img {
width: 100%;
}
.label p {
position: absolute;
color: white;
}
.points-value .progress-bar-wrapper {
grid-column: 2;
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
transform: translate(-10px);
z-index: -3;
}
.points-value .progress-bar-background {
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: grey;
width: 100%;
height: 15px;
z-index: -2;
}
.points-value .progress {
display: flex;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
background-color: darkgray;
width: 30%;
height: 15px;
z-index: -1;
}
<div class="info-row points-value">
<span class="label">
<p>1</p>
<img class="points-img" alt="" src="https://www.textures4photoshop.com/tex/thumbs/solid-circle-png-thumb16.png">
</span>
<div class="progress-bar-wrapper">
<span class="progress-bar-background" />
<span class="progress" />
</div>
</div>