如何将 iframe 视频移动到页面中心？

debugcn 发表于 Dev

波图泰迪

我试图将 iframe 视频移动到页面中心但不起作用，我该怎么做？

<div style="font-size: 1.3em;color:rgb(62, 67, 62);">               
    <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;">
        <iframe src="https://www.youtube.com/embed/PRJxJdgc4Ng" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute;top: 0;left: 0;width: 80%;height: 80%;"></iframe>
    </div>
</div>

唐尼·达马托

这是您需要的代码，如果您要继续使用内联样式执行此操作：

HTML

<div style="font-size: 1.3em;color:rgb(62, 67, 62); width:500px; margin:0 auto;">
    <div style="position: relative; height: 0; padding-top: 56.25%;">
          <iframe src="https://www.youtube.com/embed/PRJxJdgc4Ng" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute;top: 0;left: 0;height:100%;width:100%;"></iframe>
    </div>
</div>

我强烈建议不要像目前那样使用内联样式执行此操作。我建议改为使用样式表：

的CSS

.videoWrapper{
    position:relative;
    padding-top:56:25%;
    max-width:800px;
    margin:0 auto;
}

.videoWrapper iframe{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    width:100%;
}

该div可如果它占据了容器的整个宽度，这就是你需要的申报不能正确居中width或max-width先上，然后利用该margin:0 auto;声明水平居中。

如果您需要垂直居中，请更新您的问题，我会更新我的答案。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。