时间戳

首页 > 解决方案 > 如何使我的 div 嵌入对象居中？（目前左对齐）

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

问题描述

对 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 的嵌入代码中的某些内容。我在这两个方面的修补并没有改变这种情况。

谢谢您的帮助！

标签： htmlcssalignmenttableau-apiembed

解决方案

我之前评论过：

我不使用这个工具，但我没有看到你在嵌入代码周围。因此 CSS div.myTableauViz {...} 不起作用。

此外，解释的第 4 点说“还要确保您的 Viz 适合这个宽度。在嵌入代码中，您可以在 VizElement.style.width' 下找到宽度，在您的情况下为 1650 像素（我假设不是 950 像素）。

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

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

更新

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

更新 2

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

  • <div class=”myTableauViz”&gt;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>

推荐阅读