div as Circle Показатель процента на среднем javascript

Question

У меня есть div как круг, с внутренним текстом, показывающим значения в процентах (20%). Проблема заключается в том, что внутренний текст не отображается точно в центре круга.

Внутренний текст является динамическим значением, основанным на некоторых результатах в процентах. Радиус круга основан на процентных значениях, возвращаемых как результат. Возвращенные процентные значения должны отображаться точно в центре круга. Может ли кто-нибудь помочь мне в этом.

Спасибо.

Heres код,

<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 к #circle в CSS. Кроме того, добавьте это:

#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/