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

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

要垂直和水平居中对齐，请使用此技术：

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

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

希望对您有帮助。

Answer 2

添加了负值的 margin-top 以更改对齐方式

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

Answer 3

新答案

您可以在进度值上使用 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>

希望对您有所帮助。

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

Center progress-value on progress-bar background

html

css

progress

alignment