Question

我正在使用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>

Answer 1

这里有两件事情不重要：HTML属性和CSS标签/属性。属性是reviews的{{1}}部分（您可以看到完整列表here）。 CSS标记包含class="topleft"之类的内容。您可以使用HTML属性编辑CSS标记，因此如果要为某些内容设置边距，则可以创建一个名为“样式”的属性。并将css标记放在里面，如<div class="topleft">。您试图使用属性来编辑CSS标记，这就是您无法更改填充或边距的原因。 css标签和html属性之间存在一些重叠，例如高度和宽度，这就是为什么你仍然可以用属性编辑高度和宽度。

根据您的需要，我肯定会使用CSS。根据我的理解，您希望display: block;（css选择器用于<div style="margin: 10%;">的任何内容，以防您不熟悉此情况）被卡在.topleft的左侧，并且您想要一切在class="topleft"内部居中。如果是这种情况，请提供.col-md-6标记.topleft以将其内容设置为居中，并.topleft将text-align:center;浮动到float:left;的左侧}。同时为.topleft提供标记.col-md-6以使内容保持良好状态。

.col-md-6

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

1 个答案: