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

【问题标题】：How can I get my Chart.JS to center within a div?如何让我的 Chart.JS 在 div 中居中？
【发布时间】：2017-01-25 02:14:48
【问题描述】：

我正在使用 Chart.JS 创建一个饼图，如下所示：

<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 html5-canvas chart.js

【解决方案1】：

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

为了您的需要，我肯定会使用 CSS。据我了解，您希望将.topleft（带有class="topleft" 的任何内容的css 选择器，以防您不熟悉此功能）粘在.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>

【讨论】：