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

0

これはうまくいきます。

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

フィドルを確認できます：

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

于 2013-09-05T11:04:34.563 に答える