центрирование текста по вертикали в контейнере 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; 
} 

ЯШ:

// 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>');