title: Trying to align google charts with css
body: <p>I'm trying to centre the example chart provided by google: <a href="https://google-developers.appspot.com/chart/interactive/docs/quick_start" rel="nofollow">https://google-developers.appspot.com/chart/interactive/docs/quick_start</a>
  I've used the basic css centering i know (<code>margin-right: auto;margin-left: auto;</code>), But nothing seems to work. I've only been working with text and images up to this point, so any help would be greatly appreciated. </p>
  
  <p>Here is the basic code I'm laying around with (including the google charts javascript)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; 
  
    div.chart_div {
      margin-left: auto;
      margin-right: auto;
      width: 800px; }
  
  &lt;/style&gt;
  
  &lt;!--Load the AJAX API--&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
        // 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);
        }
      &lt;/script&gt;
  
  &lt;/head&gt; &lt;body&gt;
  
      &lt;!--Div that will hold the pie chart--&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  
  
  &lt;/body&gt; &lt;/html&gt;
  </code></pre>