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

最简单的居中方法是在父容器上使用flexbox。还要确保父级为全角。

#parent {
    display: flex;
    justify-content: center;
    width: 100%;
}

有关使用Flexbox的更多详细信息，请参见A Complete Guide to Flexbox。

Answer 2

使用max-width: 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>

将嵌入式Tableau仪表板居中

2 个答案: