title: Easy Pie Chart : Bug percentage not centered?
body: <p>I have a symfony project, I use bootstrap for style, and I want to use Easy Pie Chart for a dashboard page.</p>
  
  <p>So, in base.html.twig : </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;{% block title %} Website {% endblock %}&lt;/title&gt;
     {% block stylesheets %}{% endblock %}
      {% block javascripts %} {% javascripts
          'js/jquery-1.10.2.min.js'
          'js/bootstrap.min.js' 
          'js/typeahead.min.js'
          'js/jquery.easypiechart.min.js'
          'js/jquery.sparkline.min.js' %}
          &lt;script type="text/javascript" src="{{ asset_url }}"&gt;&lt;/script&gt;
          {% endjavascripts %} 
      {% endblock %}
  &lt;link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.png') }}" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      {% block header %}
      {% endblock %}
  
      &lt;div class="container"&gt;
          {% block body %}
          {% endblock %}
      &lt;/div&gt;
      {% block javascripts_after %}
      {% endblock %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In my dashboard page I have :</p>
  
  <pre><code>{% block body %}
      &lt;div class="row"&gt;
          &lt;div class="jumbotron"&gt;
              &lt;div id="easy-pie-chart" data-percent="55"&gt;
                  55%
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  {% endblock %}
  
  {% block javascripts_after %}
  &lt;script&gt;
      $('#easy-pie-chart').easyPieChart({
          animate: 2000,
          scaleColor: false,
          lineWidth: 12,
          lineCap: 'square',
          size: 100,
          trackColor: '#e5e5e5',
          barColor: '#3da0ea'
      });
  &lt;/script&gt;
  
  {% endblock %}
  </code></pre>
  
  <p>But I have this : </p>
  
  <p><img src="https://i.stack.imgur.com/PE1Nh.png" alt="enter image description here"></p>
  
  <p>The text is not centered, why ?</p>
  
  <p>I try to add this in my css but it don't work either : </p>
  
  <pre><code>.easyPieChart {
    position: relative;
    text-align: center;
    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  </code></pre>
  
  <p>If I check the code html generated I have :</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="jumbotron"&gt;
              &lt;div data-percent="55" id="easy-pie-chart"&gt;
                  55%
              &lt;canvas height="100" width="100"&gt;&lt;/canvas&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>It seems missing the style = "width: 100px; height: 100px; line-height: 100px;" in the div block, why is not added dynamically ?</p>