文字与图像重叠并与不同的数字对齐中心

问题描述 投票:0回答:1
html css image text overlap
1个回答
0
投票

我尝试重新创建您的屏幕截图,因此这比您需要的代码更多。

对您来说重要的是

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

© www.soinside.com 2019 - 2024. All rights reserved.