Question

下面是我的代码，我试图将iframe居中，但它总是要离开！这里是小提琴http://jsfiddle.net/4yL4od8j/

.videowrapper { 
text-align : center;
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
max-width: 700px;
max-height: 400px;
}

我的HTML

     <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>

Answer 1

要使您成为框架中心，您需要为videowrapper提供一个特定的width，并将margin left和right设为auto

.videowrapper { 
        float: none;
        clear: both;
        width: 700px;<-- Added-->
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;<-- Added-->
        max-width: 100%;<-- Added-->
    }

Working fiddle

尽管你想让你的画面反应灵敏，但始终使用max-width: 100%来videowrapper。

Answer 2

试试这个：

<div align="center">
<div class="videowrapper "><iframe width="560" height="315"         src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0"   allowfullscreen></iframe></a></div>
</div>

Answer 3

没有CSS解决方案。 iframe可以在文本段落中对齐，因此请使用text-align：center

将其放在空白段落中

<p style="text-align:center;">
<iframe width="420" height="315" align="middle"
src="https://www.youtube.com/embed/YOURVIDEO?controls=0"  allowFullScreen>
</iframe>
</p>

将响应式youtube iframe嵌入页面中心

3 个答案: