在其 js 容器中垂直居中文本 - progressbar.js答案

【问题标题】：centering text vertical in its js container - progressbar.js在其 js 容器中垂直居中文本 - progressbar.js
【发布时间】：2017-01-12 11:21:23
【问题描述】：

我试图在“progressbar-text”容器内垂直居中文本，但无法实现它...我想我遗漏了一些东西，或者“progressbar-text”容器周围必须有另一个包装器，但我不知道如何在不接触 js 源脚本的情况下添加另一个容器。

CSS：

#container {
  margin: 20px;
  width: 50%;
  height: 50%;
  position: relative;
}

.progressbar-text {
  background-color: black;
  vertical-align:center;
  text-align: center;
  height: 50%;
  width: 50%;
  border-radius: 50%;
  font-size: 2.2em;
}

js:

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});

bar.animate(1.0);

https://jsfiddle.net/45301v81/3/

【问题讨论】：

标签： javascript css containers

【解决方案1】：

你可以添加这个 css：

.progressbar-text span {
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

然后将实际文本包裹在一个span中，如：

circle.setText('<span>'+value+'</span>');

【讨论】：