ブートストラップ部の中央に入れる方法

Question

私はチャートを持っていますが、ジャックポットアイテムコンテナdivを視覚的に中央に表示したいのですが、これを行う方法がわかりません。

https://codepen.io/bobnooby/pen/gRedep

<div id="jackpot-container" class="col-sm-12"> 
    <div id="jackpot-item-container"> 
    <span id="jackpot-item-val">1</span> 
    <span id="jackpot-item-max-val">/50</span> 
    </div> 
    <canvas id="jackpot-chart"></canvas> 
</div> 

body, html { overflow:hidden; } 

#jackpot-container { 
    border-style: solid; 
    border-width: 1px; 
    height: 400px; 
    padding: 0; 
    margin: 0 auto; 
} 

#jackpot-item-container { 
    border-style: solid; 
    border-width: 1px; 
    width: 300px; 
    text-align: center; 
} 

私は、チャートのコードが含まれていませんでしたが、それはcodepenです。

Answer 1

window.onload = function() { 
 
    var donutEl = document.getElementById("jackpot-chart").getContext("2d"); 
 
    var donut = new Chart(donutEl).Doughnut(
 
     // Datas 
 
     [ 
 
      { 
 
       value: 300, 
 
       color:"#F7464A", 
 
       highlight: "#FF5A5E", 
 
       label: "Red" 
 
      }, 
 
      { 
 
       value: 50, 
 
       color: "#46BFBD", 
 
       highlight: "#5AD3D1", 
 
       label: "Green" 
 
      }, 
 
      { 
 
       value: 100, 
 
       color: "#FDB45C", 
 
       highlight: "#FFC870", 
 
       label: "Yellow" 
 
      } 
 
     ], 
 
     // Options 
 
     { 
 
      segmentShowStroke : true, 
 
      segmentStrokeColor : "#fff", 
 
      segmentStrokeWidth : 2, 
 
      percentageInnerCutout : 50, 
 
      animationSteps : 100, 
 
      animationEasing : "easeOutBounce", 
 
      animateRotate : true, 
 
      animateScale : false, 
 
      responsive: true, 
 
      maintainAspectRatio: false, 
 
      showScale: true, 
 
      animateScale: true 
 
     }); 
 
};

body, html { overflow:hidden; } 
 

 
#jackpot-container { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    height: 400px; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
} 
 

 
#jackpot-item-container { 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    width: 300px; 
 
    text-align: center; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate3d(-50%, -50%, 0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 
<div id="jackpot-container" class="col-sm-12"> 
 
    <div id="jackpot-item-container"> 
 
    <span id="jackpot-item-val">1</span> 
 
    <span id="jackpot-item-max-val">/50</span> 
 
    </div> 
 
    <canvas id="jackpot-chart"></canvas> 
 
</div>

：

#jackpot-item-container { 
    border-style: solid; 
    border-width: 1px; 
    width: 300px; 
    text-align: center; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate3d(-50%,-50%,0); 
} 

Answer 2

margin: 0 autoブロック要素を使用し、その親の中央に配置されます。項目に、このCSSを適用ドーナツの真ん中にそれを持っている

<div id="jackpot-container" class="col-sm-12"> 
    <div id="jackpot-item-container" style="margin:0 auto;"> 
    <span id="jackpot-item-val">1</span> 
    <span id="jackpot-item-max-val">/50</span> 
    </div> 
    <canvas id="jackpot-chart"></canvas> 
</div>