在进度条背景上将进度值居中

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>

希望有帮助。

Answer 2

使用以下方法将垂直居中对齐和水平居中对齐：

.selector {
position : absolute;
left : 50%;
top  :50%;
transform: translate(-50%, -50%);
  background : orange;
}

<div class="selector">
  <div class="box a">A</div>
</div>

希望，它会有所帮助。

Answer 3

添加了负数的页边距顶部以更改对齐方式

.progress {
  height: 10px;
  background: #BABABA;
  border-color: transparent;
  border-radius: 6px;
  transform: translate( 0px, 8px);
}

progress::-webkit-progress-bar {
  height: 10px;
  background-color: #BABABA;
  border-radius: 6px;
  margin-top: -6px;
}

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

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

<progress class='progress' max="100" value='20'>
    20%
 </progress>