如何水平中心一个iframe？

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

HTML：

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

CSS：

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

结果：

为什么iframe不像div一样集中alignment？ 我怎么能集中alignment它？

Answer 1

添加display:block; 到你的iframe的CSS。

Answer 2

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 3

最好的方法和更简单的中心在您的网页上的iframe是：

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

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

Answer 4

如果您要在iframe中放入video，并且希望您的布局变得stream畅，则应查看此网页：“ stream体宽度video”

根据video来源，如果你想让旧video变得快速响应，你的战术将需要改变。

如果这是您的第一个video，这是一个简单的解决scheme：

 <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> 

Answer 5

根据http://www.w3schools.com/css/css_align.asp ，设置左右页边距自动指定他们应该平分可用的边距。 结果是一个居中元素：

 margin-left: auto;margin-right: auto; 

Answer 6

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

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

它工作，因为它现在在一个块元素。

Answer 7

最简单的代码来alignmentiframe元素：

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