div内でChart.JSを中央に配置するにはどうすればよいですか？

Question

私はそうのようなChart.JSを使用して円グラフを作成しています：

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

..andそして、もちろん、それはデータと、そのような提供します。しかしそれは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

混同しないように重要であり、ここでは2つあります：HTML属性、およびCSSタグ/プロパティ。属性はclass="topleft"の部分は<div class="topleft">です（完全なリストhereを見ることができます）。 CSSタグは、display: block;のようなものを保持しています。 CSSタグをHTML属性で編集することができるので、何かのマージンを設定するには、 'style'という属性を作成し、CSSタグを内側に入れます（<div style="margin: 10%;">など）。 CSSタグを編集するために属性を使用しようとしていたため、埋め込みや余白を変更できませんでした。 CSSタグとhtml属性の間には、高さや幅などのオーバーラップがあるため、属性を使用して高さと幅を編集することができます。

あなたのニーズに合わせて、私は間違いなくCSSを使用します。私が理解したところでは、（class="topleft"の場合はCSSセレクター、これは初めての場合です）を.col-md-6の左側に貼り付け、.topleftのすべてを中央に揃えたいとします。その場合は.topleftのタグtext-align:center;に内容を中央に設定し、float:left;に.topleftを左に浮かべて.col-md-6のままにしておきます。また、display:inline-block;というタグを.col-md-6に付けて見栄えを保つようにしてください。

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