如何使我的div嵌入对象居中？(目前左对齐)

问题描述 投票：0回答：1

我是html和css的新手，我想嵌入一个Tableau仪表盘（以一个随机仪表盘为例）。

Left aligned, not centered

但它被左对齐而不是居中。可能导致这个问题的原因是我在内容上使用了padding。以下是提取的相关部分。

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.com20161031如何以中心为中心，即viz-css。

并试图

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

但是不能用，因为我用的是容器液，真的不知道我的宽度。我想我迷茫了，我不知道是我已有的填充物导致这种左对齐偏离中心的情况，还是Tableau的嵌入代码有问题。我在这两方面修修补补都没有改变这种情况。

谢谢你的帮助！我是html和css的新手。

html css alignment tableau embed
1个回答
0
投票

我之前评论过。

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

此外，解释的第4点说 "还要确保你的Viz适合这个宽度。在嵌入代码中，你可以在VizElement.style.width下找到宽度，在你的例子中是1650px（我假设是950px）。

就我所见，下面的代码段（使用的是 1650px 而不是 950px)很好地将 "Tableau "在视口中水平居中。

其他代码还不完整，所以现在还无法完全重现这个问题（如果它仍然存在的话）。

更新

你还需要改变 25% 到 0 在 .tab-content { padding: 30px 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.