Question

我有以下CSS可以使仪表图的Google Chart API居中：

.chart {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    max-height: 400px;
}

在HTML中，我有：

<div class="text-center">
    <div class="chart" id="gauge"></div>
</div>

通过功能调用显示图表：

function getGaugeChart(value) {

var data = new google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Gauge', value]
]);

var options = {
    width: 1200, height: 360,
    redFrom: 0, redTo: 10,
    yellowFrom: 10, yellowTo: 25,
    greenFrom: 90, greenTo: 100,
    minorTicks: 5
};

var chart = new google.visualization.Gauge(document.getElementById('gauge'));

chart.draw(data, options);
}

我正在使用Bootstrap3。该图表显示正常，在IE和Edge中居中，但在Chrome中居中。如何解决这个问题，使其集中在所有浏览器中？

Answer 1

我要使其在所有浏览器中居中的唯一方法是使CSs类带有display: inline-block

.gauge-chart {
    display: inline-block;
    margin: 0 auto;
}

在Chrome中将Google量规表居中

1 个答案: