[英]centering text vertical in its js container - progressbar.js
我正在嘗試在'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);
您可以添加以下CSS:
.progressbar-text span {
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
然后將實際文本包裝在一個跨度中,例如:
circle.setText('<span>'+value+'</span>');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.