javascript - div as Circle 在中间显示百分比 javascript

Question

我有一个圆形的 div，内部文本以百分比形式显示值(20%)。问题是内部文本没有精确显示在圆的中心。

内部文本是基于某些百分比结果的动态值。圆的半径基于结果返回的百分比值。返回的百分比值应恰好显示在圆的中心。有人可以帮我解决这个问题吗？

谢谢。

这是代码，

<style>
    #circle {
        border: 1px solid red;
        border-radius: 50%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background:blue;
    }
</style>

<div id="circle"></div>  

<script>
    $(function(){
        var maxWidth = 500, // This is the max width of your circle
        percent = Number($('#result').text()); // This is the percentage value
        percent = percent / 100;

        $("#circle").css({
            "width" : maxWidth * percent,
            "height" : maxWidth * percent,
        });
        circle.innerText =$('#result').text() + "%";
</script>

Answer 1

您可以在包含文本的圆圈内添加另一个 DIV，并将 position:relative 添加到 CSS 中的 #circle。还添加以下内容:

#circle>* {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

position:absolute 和 top: 50%/left: 50% 将放置内部 的左上角DIV 在圆的中间。 变换将其自身大小的 50% 向左/上移动。