如何以Bootstrap Div爲中心

我有一個圖表，我想讓jackpot-item-container div在圖表的中心顯示，但我無法弄清楚如何做到這一點。如何以Bootstrap Div爲中心

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

來源

2017-07-02 Undying

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>

有它的甜甜圈中間這個CSS應用到項目：

#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); 
}

來源

2017-07-02 17:13:49 buxbeatz

使用margin: 0 auto代表代碼塊元素，它將在其父項中居中。

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

來源

2017-07-02 17:11:00

如何以Bootstrap Div爲中心

回答

相關問題