1

我有一个 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>
4

2 回答 2

1

DIV您可以在包含文本的圆圈内添加另一个并添加position: relative到#circleCSS 中。还要添加这个：

#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% 移到左侧/顶部。

于 2013-09-05T10:59:30.010 回答
0

这对我有用。

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

你可以检查小提琴：

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

于 2013-09-05T11:04:34.563 回答