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

Question

我正在尝试在'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/

Answer 1

您可以添加以下CSS：

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

然后将实际文本包装在一个跨度中，例如：

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