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，并在CSS中将position: relative添加到#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的左上角放在圆圈的中间。 transform将其自身大小的50％转移到左侧/顶部。

Answer 2

这对我有用。

display: table-cell;
vertical-align: middle;

你可以检查小提琴：

http://jsfiddle.net/Pallab/zCfyV/embedded/result/

div作为圆圈在中间javascript显示百分比

2 个答案: