[解決済み] 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の埋め込みコードの何かなのか、わからなくなってしまったのだと思います。両方いじっても状況は変わりませんでした。

ありがとうございました。

解決方法は？

以前コメントしたものです。

私はこのツールを使っていないのですが、埋め込みコードの周りに置くことはありませんね。したがって、CSS div.myTableauViz {...}は動作しません。

さらに、説明の4.では、「また、あなたのVizがこの幅に合っていることを確認してください。埋め込みコードでは、VizElement.style.widthで幅を確認できます』とありますが、あなたの場合は1650px（950pxではなく、私が想定している）です。

私が見る限りでは、以下のスニペット( 1650px の代わりに 950px ) は、ビューポートで 'Tableau' を水平方向にうまくセンタリングしています。

他のコードは完全ではないので、問題を完全に再現することは今のところ不可能です（それでも問題が続く場合）。

アップデイト

を変更する必要があります。 25% から 0 で .tab-content { padding: 30px 0 } というのも、ブラウザ全体の幅のうち25％の「Tableau」全体が右に押し出されるようになったからです。新しい <div class="myTableauViz"> が中央揃えを行います。 margin-left と margin-right の設定を変更することができます。

アップデイト2

OPが2番目のpastebinコードを投稿した後、私は問題を発見しました。

• <div class=”myTableauViz”> pastebinのコードではUTF文字が二重引用符として使用されており、ブラウザはこれらが合法的な二重引用符であると認識しません。
• <div class="myTableauViz"> HTMLが認識する適切な（プレーンテキストの）二重引用符を使用します。

余分な <div> のコメントは無視してください。 .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>