html - 在进度条背景上居中进度值

Question

我在我的页面上使用了 progress 元素，但是我的背景有问题，因为背景和填充部分没有居中对齐。

这是我的进度

<progress className={'progress'} max="100" value={value}>
        {value}%
      </progress>

通过CSS

.progress {
    height: 10px
    background: #BABABA center;
    border-color: transparent;
    border-radius: 6px;
  }

  progress::-webkit-progress-bar {
    height: 10px;
    background-color: #BABABA;
    border-radius: 6px;
  }
  progress::-webkit-progress-value {
    height: 16px;
    background-color: #128CA2;
    border-radius: 6px;
  }
  progress::-moz-progress-bar {
    background-color: #128CA2;
    border-radius: 6px;
  }

如何让背景和填充部分居中对齐？

Answer 1

新答案

您可以在进度值上使用 position: absolute; 并使用 top: -3px; 使其居中。

查看片段中的评论:

.progress {
  height: 10px background: #BABABA center;
  border-color: transparent;
  border-radius: 6px;
}

progress::-webkit-progress-bar {
  position: relative; /* Added this */
  height: 10px;
  background-color: #BABABA;
  border-radius: 6px;
}

progress::-webkit-progress-value { /* Modified below */
  position: absolute;
  top: -3px;
  height: 16px;
  background-color: #128CA2;
  border-radius: 6px;
}

progress::-moz-progress-bar {
  background-color: #128CA2;
  border-radius: 6px;
}

<progress class="progress" max="100" value="10"></progress>

---

旧答案

您可以使用 linear-gradient 在视觉上降低条形图的彩色背景高度:

.progress { /* Modified this */
  height: 16px;
  background: linear-gradient(transparent 20%, #BABABA 20%, #BABABA 80%, transparent 80%) center;
  border-color: transparent;
  border-radius: 16px;
}

progress::-webkit-progress-bar {
  height: 10px;
  background: transparent; /* Modified here */
  border-radius: 6px;
}

progress::-webkit-progress-value {
  height: 16px;
  background-color: #128CA2;
  border-radius: 6px;
}

progress::-moz-progress-bar {
  background-color: #128CA2;
  border-radius: 6px;
}

<progress class="progress" max="100" value="10"></progress>

希望对您有所帮助。