我有一个 symfony 元素，我使用 bootstrap 作为样式，我想使用 Easy Pie Chart 作为仪表板页面。
所以，在 base.html.twig 中:
<html>
<head>
<meta charset="UTF-8" />
<title>{% block title %} Website {% endblock %}</title>
{% 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' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('img/favicon.png') }}" />
</head>
<body>
{% block header %}
{% endblock %}
<div class="container">
{% block body %}
{% endblock %}
</div>
{% block javascripts_after %}
{% endblock %}
</body>
</html>
在我的仪表板页面中，我有:
{% block body %}
<div class="row">
<div class="jumbotron">
<div id="easy-pie-chart" data-percent="55">
55%
</div>
</div>
</div>
{% endblock %}
{% block javascripts_after %}
<script>
$('#easy-pie-chart').easyPieChart({
animate: 2000,
scaleColor: false,
lineWidth: 12,
lineCap: 'square',
size: 100,
trackColor: '#e5e5e5',
barColor: '#3da0ea'
});
</script>
{% endblock %}
但我有这个:
文字没有居中，为什么？
我尝试在我的 css 中添加它，但它也不起作用:
.easyPieChart {
position: relative;
text-align: center;
canvas {
position: absolute;
top: 0;
left: 0;
}
}
如果我检查生成的代码 html，我有:
<div class="row">
<div class="jumbotron">
<div data-percent="55" id="easy-pie-chart">
55%
<canvas height="100" width="100"></canvas></div>
</div>
</div>
似乎缺少样式 = "width: 100px; height: 100px; line-height: 100px;"在 div 块中，为什么不动态添加？
最佳答案
检查这个 fiddle
您忘记在包装器 class="chart" 中添加一个类
<div class="row">
<div class="jumbotron">
<div class="chart" data-percent="55" id="easy-pie-chart">
<span class="percent">55</span>
</div>
</div>
</div>
关于jquery - 简单的饼图 : Bug percentage not centered?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20274928/