如何将我的 div 嵌入对象居中？（目前左对齐）

Question

html 和 css 的新手，我正在尝试嵌入 Tableau 仪表板（以随机仪表板为例）

但它是左对齐而不是居中。可能导致此问题的原因是我正在为内容使用填充。以下是提取的相关部分：

HTML:

<div class="container-fluid">
              <div class="row">
                <div class="col-xs-12 ">
                  <nav>
                    <div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                      <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
                      <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
                      <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
                    </div>
                  </nav>

                  <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="container-fluid">


                TABLEAU EMBEDDED CODE--->     <div class='tableauPlaceholder' id='viz1591736430373' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><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='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><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;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591736430373');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

CSS:

.tab-content{
  background: rgb(254, 254, 254);
    line-height: 25px;
    border-top:5px solid #006950;
    border-bottom:5px solid #006950;
    border-left:none;
    border-right:none;
    padding:30px 25%;

}

这是 Tableau 提供的原始嵌入式代码：

<div class='tableauPlaceholder' id='viz1591742882598' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><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='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><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;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591742882598');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>

我试过

tableauPlaceholder{margin: 0;}

-在 CSS 中无济于事。

我看了这篇指南https://tableauing.wordpress.com/2016/10/31/how-to-center-that-viz-css/

尝试过

div.myTableauViz {
width: 950px;
margin-left: auto ;
margin-right: auto ;
}

但它无法工作，因为我使用的是容器流体并且真的不知道我的宽度。我想我迷路了，我不知道是我预先存在的填充导致左对齐偏离中心，还是 Tableau 的嵌入代码中有问题。我在两者中的修补并没有改变这种情况。

感谢您的帮助！

Answer 1

我之前评论过：

我不使用此工具，但我没看到您放置嵌入式代码。因此 CSS div.myTableauViz {...} 不起作用。

此外，解释的第 4 点说 'Also ensure that your Viz fits this width. In the embed code you can find the width under VizElement.style.width' 你的情况是 1650px（我假设不是 950px）。

据我所知，下面的代码片段（使用 1650px 而不是 950px）很好地将 'Tableau' 在视口中水平居中。

其他代码不完整，所以现在不可能完全重现问题（如果它仍然存在的话）。

更新

您还需要在 .tab-content { padding: 30px 0 } 中将 25% 更改为 0，因为它现在将整个 'Tableau' 浏览器总宽度的 25% 向右推。新的 <div class="myTableauViz"> 将通过 margin-left 和 margin-right 设置进行居中。

更新 2

在 OP 发布第二个 pastebin 代码后，我发现了问题：

<div class=”myTableauViz”> pastebin 代码使用 UTF 字符作为双引号，浏览器无法将其识别为合法的双引号
<div class="myTableauViz"> 使用正确的（纯文本）双引号 HTML 识别

额外的<div>加上CSS仍然是必需的，但是忽略.tab-content

的注释

div.myTableauViz {
  width: 1650px;
  margin-left : auto;
  margin-right: auto;
}
.tab-content {
  background: rgb(254, 254, 254);
  line-height: 25px;
  border-top: 5px solid #006950;
  border-bottom: 5px solid #006950;
  border-left: none;
  border-right: none;
  padding: 30px 25%; /* reverted back to 25% */
/* update 2 ingnore: changed 25% to 0, top/bottom padding only */
}

<div class="tab-content">
  <div class="myTableauViz">
    <div class='tableauPlaceholder' id='viz1591742882598' style='position: relative'><noscript><a href='#'><img alt=' ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><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='TheStampsinmyPassport&#47;TheStampsinmyPassport' /><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;Th&#47;TheStampsinmyPassport&#47;TheStampsinmyPassport&#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='mobile=' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1591742882598');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='1650px';vizElement.style.height='927px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
  </div>
</div>

如何将我的 div 嵌入对象居中？（目前左对齐）

How can I center my div embedded object? (Currently left aligned)

html

css

embed

alignment

tableau-api

如何将我的 div 嵌入对象居中？ （目前左对齐）

How can I center my div embedded object? (Currently left aligned)

html

css

embed

alignment

tableau-api

如何将我的 div 嵌入对象居中？（目前左对齐）