如何水平居中iframe？

Question

考虑以下示例:( 现场演示)

HTML:

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

CSS:

div, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;
}

结果:

为什么iframe不像中心那样集中对齐div？我怎么能集中对齐它？

Answer 1

添加display:block;到您的iframe css.

Answer 2

在您的网页上以iframe为中心的最佳方式和更简单的方法是:

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>

其中width和height将是html页面中iframe的大小.

Answer 3

HTML:

<div id="all">
    <div class="sub">div</div>
    <iframe>ss</iframe>
</div>

CSS:

#all{
    width:100%;
    float:left;
    text-align:center;
}
div.sub, iframe {
    width: 100px;
    height: 50px;
    margin: 0 auto;
    background-color: #777;

}

Answer 4

我对此最简单的解决方案。

iframe {
    margin:auto;
    display:block;
}

Answer 5

如果您要在iframe中放置视频,并且希望布局流畅,则应该查看此网页:流体宽度视频

根据视频源的不同,如果您希望旧视频变得响应,您的策略将需要更改.

如果这是您的第一个视频,这是一个简单的解决方案:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

并添加此CSS:

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

免责声明:这些都不是我的代码,但我已对其进行了测试,并对结果感到满意.

Answer 6

对齐iframe元素的最简单代码:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>

Answer 7

你可以把iframe放在一个 <div>

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

它的工作原理是因为它现在位于一个块元素中.

Answer 8

你可以试试

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

我希望它对你有用

关联

Answer 9

如果您无法访问 iFrame 类，请将以下 css 添加到包装器 div 中。

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>