如何使我的div嵌入对象居中？(目前左对齐)
问题描述 投票：0回答：1
我是html和css的新手，我想嵌入一个Tableau仪表盘（以一个随机仪表盘为例）。
但它被左对齐而不是居中。可能导致这个问题的原因是我在内容上使用了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://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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/TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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/TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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的新手。
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://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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/TheStampsinmyPassport' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https://public.tableau.com/static/images/Th/TheStampsinmyPassport/TheStampsinmyPassport/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>最新问题
- 获取存储库时出错：HTTP 错误！状态：401
- Thingsboard 上的性能问题、从数据库收集数据以及在浏览器中的仪表板上可视化
- SQL Server Management Studio 中到 Azure SQL 数据库的连接
- 如何从 Android Studio 的数据库中获取卡路里总量？
- 我们如何为特定语言添加CSS？
- .gitlab-ci.yml：通过 SSH 在远程服务器上执行多个命令
- launchPriceChangeConfirmationFlow 未在 flutter 的 inAppPurchase 中定义
- 当元素处于焦点状态时，如何向 ion-searchbar 添加样式？离子8
- Google 云平台上的托管服务提供商[已关闭]
- 错误消息被记录为 React 元素 $$typeof: Symbol(react.element)
- 使用 sonarqube google 计算实例安装声纳扫描仪时出现错误“无法在 JAVA_HOME 或 PATH 中找到‘java’可执行文件”
- 广度优先搜索与贪婪算法
- 无法安装nltk
- 对 CockroachDB 使用 r2dbc-postgresql 导致身份验证失败：“密码不能为空”
- “无法找到 Gauge 项目目录。缺少 Manifest.json 文件”Maven 构建时抛出错误
- 运行并行模型并编译结果
- 使用 TanStack Query 更新 React Native 中的搜索状态时防止不必要的重新渲染
- SQL 连接中 OR NULL 的替代方案
- 工作流程管理或业务流程管理系统
- 如何在 Web 应用程序中使用 Azure 应用服务身份验证来控制 Blob 访问
© www.soinside.com 2019 - 2024. All rights reserved.