如何水平居中iframe ?

考虑下面的例子:(现场演示)

HTML:

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

CSS:

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

结果:

enter image description here

为什么iframe不像div那样集中对齐?我怎么把它放在中间?

621304 次浏览
小开
最佳答案

将display:block;添加到iframe css中。

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


iframe {
display: block;
border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>

小开

你可以把iframe放在<div>中

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

它可以工作，因为它现在在块元素中。

小开

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;


}
小开

根据http://www.w3schools.com/css/css_align.asp，将左右边距设置为auto指定它们应该平均分割可用的边距。结果是一个居中的元素:

margin-left: auto;margin-right: auto;
小开

如果你把一个视频放在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%;
}

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

小开

将iframe居中的最佳方法和更简单的方法是:

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

其中宽度和高度将是你的HTML页面中的iframe的大小。

小开

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

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

你可以试试

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

我希望它对你有用

link

小开
在这里，我为所有那些痛苦地将iframe或图像水平地置于屏幕中央的人放了一段代码。 如果你喜欢，请给我点赞投票👍⯅.

.

.

.

风格> img &Iframe >，这是你的标签名，所以如果你想要任何其他标签在中心改变它

<html >
<head>
<style type=text/css>
div{}
img{
margin: 0 auto;
display:block;
}
iframe{
margin: 0 auto;
display:block;
}
				

</style>
</head>
<body >
           

<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
			

<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
</body>
</html>

小开

在我的情况下，解决方案是在iframe类添加:

    display: block;
margin-right: auto;
margin-left: auto;
小开

如果你不能访问iFrame类，然后添加下面的css包装div。

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

最简单的解决方法。

iframe {
margin:auto;
display:block;
}
小开

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

使用它和嵌入facebook在iframe中心的HTML页面


提交答案