进度栏上的文本中心

Question

我正在尝试将百分比总计放置在彩色进度条的中心，但是正在努力做到这一点。

我尝试将<p>标记放在不同的<div>标记中，但无法完全解决。

有人可以帮忙吗？

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
}

.progress-size {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  border: 1px solid #FFFFFF;
  background: #3498DB;
  height: 50px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

.progress-value {
  vertical-align: middle;
  line-height: 50px;
  padding-left: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
  <div class="progress-bar progress-size"></div>
</div>
<p class="progress-value progress-size alt text-center">25%</p>

Answer 1

您可以将文本完全放在条形图的内部，然后将右边的值设置为100减去百分比：

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
  
  $('.progress-value').stop().animate({
    right: 100 - $('.progress-wrap').data('progress-percent') + '%'
  }, animationLength);
}

.progress-size {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  border: 1px solid #FFFFFF;
  background: #3498DB;
  height: 50px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

.progress-value {
  line-height: 50px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100%;
  text-align:center;
  margin:0;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
  <div class="progress-bar progress-size"></div>
  <p class="progress-value alt text-center">25%</p>
</div>

Answer 2

您无需在此处定位。只需将.progress-value元素放入包装器中，并使用padding-left属性即可为百分比值设置动画。要使值居中，您可以使用偏移量和进度总值的一半：(progressTotal-15)/2

这是工作示例：

// on page load...
moveProgressBar();
// on browser resize...
$(window).resize(function() {
  moveProgressBar();
});

// SIGNATURE PROGRESS
function moveProgressBar() {
  console.log("moveProgressBar");
  var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
  var getProgressWrapWidth = $('.progress-wrap').width();
  var progressTotal = getPercent * getProgressWrapWidth;
  var animationLength = 1000;

  // on page load, animate percentage bar to data percentage length
  // .stop() used to prevent animation queueing
  $('.progress-bar').stop().animate({
    left: progressTotal
  }, animationLength);
  $('.progress-value').stop().animate({
    paddingLeft: (progressTotal-15)/2
  }, animationLength);
}

.progress-size {
  width: 100%;
  height: 50px;
}

.progress-wrap {
  border: 1px solid #FFFFFF;
  background: #3498DB;
  height: 50px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  background: #ddd;
  left: 0;
  position: absolute;
  top: 0;
}

.progress-value {
  padding-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress-wrap" data-progress-percent="25">
  <div class="progress-bar progress-size"></div>
  <p class="progress-value progress-size alt text-center">25%</p>
</div>

Answer 3

请检查，希望对您有帮助 https://codepen.io/Thakur92411/pen/aRoEoa 1

<div class="progress-wrap" data-progress-percent="25">
  <div class="valuetext">25%</div>
  <div class="progress-bar progress-value progress-size"></div>
</div>