html - 将嵌入式 Tableau 仪表板居中

Question

无法在页面上将仪表板居中。仪表板默认为左边距。

不确定需要什么 CSS 来使下面的仪表板居中。

<div class='tableauPlaceholder' id='viz1564440862126' style='width: 100%;'>
      <noscript>
        <a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TestDashboard_15644386326000&#47;Dashboard3&#47;1_rss.png'
         style='border: none'/></a>
      </noscript>
    <object class='tableauViz'  width='auto' height='300' style='display:block;'>
        <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F'/> 
        <param name='embed_code_version' value='3'/>
        <param name='site_root' value=''/>
        <param name='name' value='TestDashboard_15644386326000&#47;Dashboard3'/>
        <param name='tabs' value='no'/>
        <param name='toolbar' value='yes'/>
        <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TestDashboard_15644386326000&#47;Dashboard3&#47;1.png'/>
        <param name='animate_transition' value='yes'/>
        <param name='display_static_image' value='yes'/>
        <param name='display_spinner' value='yes'/>
        <param name='display_overlay' value='yes'/>
        <param name='display_count' value='yes'/>
        <param name='filter' value='iframeSizedToWindow=true'/>
    </object>
</div>
<script type='text/javascript'>
      var divElement = document.getElementById('viz1564440862126');
      var vizElement = divElement.getElementsByTagName('object')[0];
      vizElement.style.minWidth='100%';vizElement.style.maxWidth='100%';
      vizElement.style.width='100%';vizElement.style.minHeight='587px';
      vizElement.style.maxHeight='887px';
      vizElement.style.height=(divElement.offsetWidth*0.75)+'px';
      var scriptElement = document.createElement('script');
      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
      vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>

让仪表板以页面为中心。

Answer 1

使用最大宽度:650px;

<div class='tableauPlaceholder' id='viz1564440862126' style="width: 100%; margin: 0 auto;">
      <noscript>
        <a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TestDashboard_15644386326000&#47;Dashboard3&#47;1_rss.png'
         style='border: none'/></a>
      </noscript>
    <object class='tableauViz'  width='auto' height='300' style='display:block;'>
        <param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F'/> 
        <param name='embed_code_version' value='3'/>
        <param name='site_root' value=''/>
        <param name='name' value='TestDashboard_15644386326000&#47;Dashboard3'/>
        <param name='tabs' value='no'/>
        <param name='toolbar' value='yes'/>
        <param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;TestDashboard_15644386326000&#47;Dashboard3&#47;1.png'/>
        <param name='animate_transition' value='yes'/>
        <param name='display_static_image' value='yes'/>
        <param name='display_spinner' value='yes'/>
        <param name='display_overlay' value='yes'/>
        <param name='display_count' value='yes'/>
        <param name='filter' value='iframeSizedToWindow=true'/>
    </object>
</div>
<script type='text/javascript'>
      var divElement = document.getElementById('viz1564440862126');
      var vizElement = divElement.getElementsByTagName('object')[0];
      vizElement.style.maxWidth='650px'; // This is the secret sauce
      vizElement.style.width='100%';
      vizElement.style.minHeight='587px';
      vizElement.style.maxHeight='887px';
      vizElement.style.height=(divElement.offsetWidth*0.75)+'px';
      var scriptElement = document.createElement('script');
      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
      vizElement.parentNode.insertBefore(scriptElement, vizElement);
</script>