Html 调整谷歌线形图的位置

我需要一个谷歌折线图居中

问题是，我不能使用

align=“center”

，因为这会导致工具提示悬停滞后，我不知道为什么

我找到了一种在inspector中将图表居中的方法，方法是在我的图表div中删除

位置：relative

两个div

我想用它来覆盖这个

#electricalLineChart div div{
position: static!important 
} 

但即使使用

，它也会忽略此代码！重要信息

我在文档中没有找到任何关于定位的内容。我试着使用

legend

只是为了好玩，但似乎什么都没用。 以下是我的图表代码：

// line chart
        var linechart1 = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'electricalLineChart',
            dataTable: joinedData,
            options: {
                colors: ['#4DC3FA', '#185875'],
                animation: {
                    duration: 1000,
                    easing: 'out',
                },
                width: 800,
                height: 500,
                legend: { position: 'static'},
                title: 'Line Chart',
                explorer: {},
                hAxis: {
                    title: 'Month'
                },
                vAxis: {
                    format: formatPattern
                    //title: 'Amount Billed ($), Consumption (kWh)',

                }
            },
        });

相关HTML：

<div style="overflow-x:auto;">
                    <table class="container">
                        <tbody id="electrical-tables">
                            <tr id="odd-cells">
                                <td>
                                    <div id="electricalLineChart"></div>
                                </td>
                            </tr>
                                .... other rows removed for clarity
                          </tbody>
                       </table>
        </div>

本质上，图像中带有

dir=“ltr”

的第三个div必须是

position:static

而不是

position:relative

问题是，

元素是块元素，这意味着它们扩展了其父元素的总宽度

即使图表没有占据整个宽度，

仍会扩展到父级的宽度

要防止这种行为，请将以下css添加到

，
这将允许它居中

display: inline-block;

e、 g

---

对刚刚，对不起，我还没准备好就击中了柱子

display: inline-block;

#electricalLineChart, #Request_line_chart1{
  width: 80%;
  margin: auto;
  display: inline-block;
}