4

我在这样的 div 中有一个 iframe：

<section>
   <div>
      <iframe></iframe>
   </div>
</section>

iframe 包含 Flash 中的 youtube 视频，但在这种情况下可能无关紧要。

我正在构建马赛克，因此尝试使用 div 将 iframe 裁剪为适当的大小。

这是由

.section
    {height: 251px;
    width: 198px;
    overflow: hidden}

效果很好，但我也想将视频居中。对于图像，我将它们添加为背景图像并使用

background-size: cover

使它们居中。这很整洁，因为它们会自动重新缩放到最大可能的大小。但是，这不适用于视频。如果可能的话，我会满足于简单地将 iframe 垂直和水平居中。

4

4 回答 4

2

将其添加到您的 css 有帮助吗？如果 div 大于 section，它会起作用。

section div {
    margin-top:-50%;
    margin-left:-50%;
}

http://jsfiddle.net/hvCXm/

于 2013-07-17T15:11:37.290 回答
0

包装 iframe 并用于text-align: center;对齐水平中心

div {
text-align: center;
display: block;
}

或者

iframe { 
margin: 0 auto; 
display: block;
}
于 2013-07-17T15:04:15.183 回答
0

尝试：

iframe {
    margin:0 auto;
}
于 2013-07-17T15:06:18.593 回答
0

使块元素居中的标准方法：

iframe {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
于 2013-07-17T15:06:28.690 回答