Html 如何水平居中 iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8366957/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center an iframe horizontally?
提问by Misha Moroshko
Consider the following example: (live demo)
考虑以下示例：（现场演示）
HTML:
HTML：
<div>div</div>
<iframe></iframe>
CSS:
CSS：
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
Result:
结果：
Why the iframeis not centrally aligned like the div? How could I centrally align it?
为什么iframe不像 那样居中对齐div？我怎么能集中对齐它？
回答by Alohci
Add display:block;to your iframe css.
添加display:block;到您的 iframe css。
回答by pedro
best way and more simple to center an iframe on your webpage is :
在您的网页上居中 iframe 的最佳方法和更简单的方法是：
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>
where width and height will be the size of your iframe in your html page.
其中宽度和高度将是您的 html 页面中 iframe 的大小。
回答by mgraph
HTML:
HTML：
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>
CSS:
CSS：
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
回答by Tushar Soni
The simplest code to align the iframe element:
对齐 iframe 元素的最简单代码：
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
回答by Nohl
If you are putting a video in the iframe and you want your layout to be fluid, you should look at this webpage: Fluid Width Video
如果您在 iframe 中放置视频并且希望您的布局流畅，则应该查看此网页：Fluid Width Video
Depending on the video source and if you want to have old videos become responsive your tactics will need to change.
根据视频源，如果您想让旧视频变得响应，您的策略将需要改变。
If this is your first video, here is a simple solution:
如果这是您的第一个视频，这里有一个简单的解决方案：
<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>And add this css:
并添加这个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%;
}Disclaimer: none of this is my code, but I've tested it and was happy with the results.
免责声明：这些都不是我的代码，但我已经对其进行了测试并且对结果感到满意。
回答by Sonal Khunt
You can put iframe inside a <div>
你可以把 iframe 放在一个 <div>
<div>
<iframe></iframe>
</div>
It works because it is now inside a block element.
它起作用是因为它现在位于块元素内。
回答by boussac
According to http://www.w3schools.com/css/css_align.asp, setting the left and right margins to auto specifies that they should split the available margin equally. The result is a centered element:
根据http://www.w3schools.com/css/css_align.asp，将左右边距设置为 auto 指定它们应该平均分割可用边距。结果是一个居中的元素：
margin-left: auto;margin-right: auto;
