Center Aligning the Google charts

The accepted answer is broken; you have to use display: inline-block to center align your chart.


Give the chart_div: display: block and margin: 0 auto;


I have been facing the same issue with a google gauge. Checking the code generated I realized that the next thing inside the <div id='chart_div'> is a table with margin 0 set as inline style.

So in order to override it I used the following css:

div.chart_div table {
    width: auto;
    margin: 0 auto !important;
}

And this worked.


You could also do <div id='chart_div' align='center'> This worked for me, although now my chart hovering function isn't working. Anyone else get this problem? I'm talking about when you hover the mouse over a point on the graph. It usually shows the point such as Jan Sales 440. Anyone know of a fix?