使用 CSS 使幻灯片居中答案

【问题标题】：Centering a Slideshow with CSS使用 CSS 使幻灯片居中
【发布时间】：2018-02-07 06:36:12
【问题描述】：

无论如何，我都不是编码员，我几乎没有受过什么培训，只能靠我可以在网上学习的东西过活。话虽如此，如果这是一个愚蠢的问题，我深表歉意！我是一名摄影师，当客户的图像准备好时，我会为客户制作这些幻灯片，但我无法让他们在显示的任何页面上居中（水平）。在我的查看画廊中，有几种不同的页面宽度，所以即使我手动使用（即：左 95 像素）或该页面的任何内容，它显然也无法在具有不同站点宽度的不同页面上工作。我确信有一个简单的通用命令可以添加到所有这些幻灯片中，这将使它们在每一页上居中，但我无法弄清楚——任何帮助将不胜感激！这是我正在使用的代码...

<style>
    .ss-embed-container-89670 {
        position:relative; padding-bottom:680px; 
        height:0; overflow:hidden; max-width:1020px} .ss-embed-container-89670 
        iframe {position:absolute; top:0;left:0; width:100%!important; 
        height:100%!important;
    } 
</style>
<div class="ss-embed-container-89670"><iframe src="https://greg-
    ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0" 
    webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

【问题讨论】：

标签： css image slideshow centering

【解决方案1】：

你可以尝试做这样的事情：

<div style="margin: 0 auto;">
    <div class="ss-embed-container-89670"><iframe src="https://greg-
        ross.smartslides.com/morgan-clayton?pt=ed" frameborder="0" 
        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

【讨论】：

谢谢你，Gabriel，这么快的回复！我刚刚尝试了您的解决方案，但由于某种原因，现在幻灯片没有出现。我正在检查它，看看我是否能找出原因。你有没有看到任何明显的原因说明它为什么会破裂？
这可能是因为 position: relative 在你的 CSS 中。试试看这个stackoverflow.com/questions/25888354/…