如何让我的Chart.JS在div中居中？

问题描述：

我创建使用chart.js之像这样的饼图：如何让我的Chart.JS在div中居中？

<canvas id="top10ItemsChart" width="320" height="320"></canvas>

然后，当然..和，从而提供它的数据和这样。但它显示在div中，它与左边对齐。我更喜欢它在div中集中（无论如何）。我尝试了以下所有内容，但是没有一个让它变得更好。它保持磁化到左侧。

<canvas id="top10ItemsChart" margin-left="80px" width="320" height="320"></canvas> 

<canvas id="top10ItemsChart" padding-left="80px" width="320" height="320"></canvas> 

<canvas id="top10ItemsChart" left="80px" width="320" height="320"></canvas>

一个中心将是完美的，但我会满足于提供其硬值，因为我尝试了上述的事情。

整个HTML是：

<div class="col-md-6"> 
    <div class="topleft"> 
     <h2 class="sectiontext">Top 10 Items</h2> 
     <br/> 
     <canvas id="top10ItemsChart" width="320" height="320"></canvas> 
    </div> 
</div>

答

这里有两个事情是重要的是不要混淆：HTML属性和CSS标签/属性。属性是<div class="topleft">的class="topleft"部分（您可以看到完整列表here）。一个CSS标签是什么东西像display: block;。您可以使用HTML属性编辑CSS标签，因此如果您想为某些东西设置边距，您可以创建一个名为'style'的属性并将css标签放在里面，如<div style="margin: 10%;">。您试图使用属性来编辑CSS标签，这就是您无法更改填充或边距的原因。 CSS标签和html属性之间有一些重叠，例如高度和宽度，这就是为什么您仍然可以使用属性编辑高度和宽度的原因。

为了您的需要，我肯定会使用CSS。据我所知，你想.topleft（css选择器的任何与class="topleft"，如果你是新来的）被卡住在.col-md-6的左侧，并且你希望.topleft中的所有内容都居中。如果是这种情况，那么给.topleft标记text-align:center;设置它的内容为中心，并且float:left;保持.topleft浮动到.col-md-6的左边。还给.col-md-6标签display:inline-block;，以保持好看的东西。

<div class="col-md-6" style="display:inline-block"> 
    <div class="topleft" style="text-align:center; float:left;"> 
    <h2 class="sectiontext">Top 10 Items</h2> 
    <br/> 
    <canvas id="top10ItemsChart" width="320" height="320"></canvas> 
    </div> 
</div>

如何让我的Chart.JS在div中居中？

相关推荐