如何在item.html中实现Vega-Lite图表居中显示

解决方案 #

你需要调整以下3处内容即可实现需求：

1. 修正HTML标签笔误：所有<thread>是错误写法，替换为正确的表格表头标签<thead>
2. 给第一个表格的内容单元格添加居中样式，同时统一两个表格的宽度，保证上下布局宽度对齐
3. 给第一个图表的容器div添加居中属性，移除无效的行内display属性写法

修改后的完整代码示例： #

<!-- 第一个表格（放居中的Graph1） -->
<table width="100%" style="max-width: 900px; margin: 0 auto;">
    <thead>
        <tr>
            <th colspan="2">U.S. Gasoline Retail Prices</th>
        </tr>
    </thead>
    <tr>
        <td align="center">
            <div id="vis2" style="margin: 0 auto;"></div>
        </td>
    </tr>
</table>
<br><br>
<!-- 第二个表格（放并排的Graph2、Graph3） -->
<table width="100%" style="max-width: 900px; margin: 0 auto;">
    <thead>
        <tr>
            <th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
            <th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
        </tr>
    </thead>
    <tr>
        <td><div id="vis3"></div></td>
        <td><div id="vis4"></div></td>
    </tr>
</table>

补充说明： #

如果你的Vega-Lite图表渲染后是固定宽度，div上的margin: 0 auto会自动计算左右边距实现居中；如果是百分比自适应宽度，<td>上的align="center"就会让内容居中对齐。你可以根据自己实际的图表宽度调整max-width的数值，保证和你的图表实际总宽度匹配即可。

内容的提问来源于stack exchange，提问作者noobie