Question

我有一个图表，我希望jackpot-item-container 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中。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

将它放在甜甜圈中间将此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);
}

Answer 2

对{strong>块元素使用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>

如何在Bootstrap Div中居中

2 个答案: