CODEWITHSUNDEEP
javascriptcsscontainers
HendrikEng
HendrikEng

Reputation: 684

centering text vertical in its js container - progressbar.js

I am trying to vertically center a text inside the 'progressbar-text' container, but cant achieve it...i guess i am missing something, or there has to be another wrapper around the 'progressbar-text' container, but i cant't figure out how to add another container without touching the js source script.

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:

// [email protected] 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/

Upvotes: 1

Views: 537

Answers (1)

Austin Jenkins
Austin Jenkins

Reputation: 373

You could add this css:

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

And then wrap the actual text in a span, such as:

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

Upvotes: 2

Related Questions