如何水平居中iframe？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何水平居中iframe？相关的知识，希望对你有一定的参考价值。
请考虑以下示例：（live demo）
html：
<div>div</div>
<iframe></iframe>
CSS：
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
结果：
为什么iframe不像div那样集中对齐？我怎么能集中对齐它？
答案
将display:block;添加到您的iframe css中。
另一答案
在您的网页上以iframe为中心的最佳方式和更简单的方法是：
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
其中width和height将是html页面中iframe的大小。
另一答案
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;
}
另一答案
如果您要在iframe中放置视频，并且希望布局流畅，则应该查看此网页：Fluid Width Video
根据视频源的不同，如果您希望旧视频变得响应，您的策略将需要更改。
如果这是您的第一个视频，这是一个简单的解决方案：
<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>另一答案
对齐iframe元素的最简单代码：
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
另一答案
你可以把iframe放在<div>里面
<div>
<iframe></iframe>
</div>
它的工作原理是因为它现在位于一个块元素中。
另一答案
根据http://www.w3schools.com/css/css_align.asp，将左右边距设置为auto指定他们应该平均分割可用边距。结果是一个居中的元素：
margin-left: auto;margin-right: auto;
另一答案
你可以试试
<h3 style="text-align:center;"><iframe src=""></iframe></h3>
我希望它对你有用
以上是关于如何水平居中iframe？的主要内容，如果未能解决你的问题，请参考以下文章