I'm creating a pie chart using Chart.JS like so:
<canvas id="top10ItemsChart" width="320" height="320"></canvas>
..and then, of course, providing it data and such. But it displays in the div wherein it is ensconced aligned to the left. I prefer it centered (more-or-less, anyway) within the div. I tried all of the following, but none of them make it budge; it stays magnetized to the left side.
<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>
A centering would be perfect, but I would be satisfied with providing it a hard value, as I try to do above.
The entire html is:
<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>
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments