[Chartjs]-How can I get my Chart.JS to center within a div?

by

1👍

✅

There are two things here that are important to not mix up: HTML Attributes, and CSS tags/properties. An attribute is the class="topleft" part of <div class="topleft"> (you can see the full list here). A CSS tag is what holds things like display: block;. You can edit CSS tags with an HTML attribute, so if you want to set the margin for something, you would create an attribute called ‘style’ and put the css tag inside, like <div style="margin: 10%;">. You were trying to use attributes to edit CSS tags, which is why you couldn’t change padding or margins. There is some overlap between css tags and html attributes, such as height and width, which is why you could still edit the height and width with attributes.

For your needs, I would definitely use CSS. From what I understand, you want .topleft (css selector for anything with class="topleft", in case you are new to this) to be stuck to the left side of .col-md-6, and you want everything inside of .topleft to be centered. If that is the case, then give .topleft the tags text-align:center; to set its contents to be centered, and float:left; to keep .topleft floating to the left of .col-md-6. Also give .col-md-6 the tag display:inline-block; to keep things looking nice. 

<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>

Leave a comment