试图将谷歌图表与 CSS 对齐答案

【问题标题】：Trying to align google charts with css试图将谷歌图表与 CSS 对齐
【发布时间】：2014-02-22 22:00:02
【问题描述】：

我正在尝试将 google 提供的示例图表居中：https://google-developers.appspot.com/chart/interactive/docs/quick_start 我使用了我知道的基本 css 居中 (margin-right: auto;margin-left: auto;)，但似乎没有任何效果。到目前为止，我只使用文本和图像，因此非常感谢任何帮助。

这是我正在使用的基本代码（包括谷歌图表 javascript）

<!DOCTYPE html> <html> <head> <style> 

  div.chart_div {
    margin-left: auto;
    margin-right: auto;
    width: 800px; }

</style>

<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

</head> <body>

    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>


</body> </html>

【问题讨论】：

标签： javascript html css charts

【解决方案1】：

Stovroz 完全正确！

在 CSS 中，您将 div.chart_div 定义为一个类；但在 HTML 中，您定义为 div#chart_div ID。

以下 CSS 代码通常用于将页面中的所有内容居中..

<style> 
body{ text-align: center;}
#chart_div{width: 800px; margin: 0 auto; text-align: left;}
</style>

【讨论】：

【解决方案2】：

您的 CSS div.chart_div 的目标是 class="chart_div" 的 div，但您有一个 id="chart_div" 的 div。在 CSS 中使用 # 来定位 ID，即 div#chart_div。

【讨论】：