如何水平放置iframe中心？

175

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那样居中对齐？我怎么能集中对齐它？

来源

2011-12-03 Misha Moroshko

为什么不换一个div这个IFRAME？ – Giberno

297

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

来源

2011-12-03 10:14:49 Alohci

+21

谢谢！我应该猜到，“内联框架”是一个内联元素:) –

+25

所以这就是“我”代表的。 – Aayush

所以，或者，你可以给容器一个'text-align：center'规则，对吗？ – Koviko

你可以把iframe中一个<div>

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

它的工作原理，因为它现在是一个块元素里面。

来源

2011-12-03 10:18:17

测试 - 它不起作用 – user819490

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; 

}

来源

2011-12-03 10:20:13 mgraph

据，设置左，右页边距为自动指定他们应该平分可用保证金。其结果是一个居中的元素：

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

来源

2014-09-25 16:18:40 boussac

只有父元素的样式text-align设置为居中。 – parvus

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

并添加此CSS：

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

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

来源

2014-10-13 18:38:23 Nohl

最佳途径，更简单地在您的网页上居中iframe是：

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

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

来源

2015-11-15 14:18:56 pedro

我认为'align'属性已被弃用？为什么OP应该使用这种方法而不是使用CSS - 优点是什么？ – andrewsi

'style =“text-align：center”'不被弃用，即使折旧，它也可以做同样的工作 – Anthony

，但是一切都不行。 – user819490

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

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

来源

2017-07-18 15:46:40

请首先看到如何回答这个问题之前已经回答，显然，您可以在此添加答案。但是在回答之前你需要了解一些观点。首先，不要添加之前添加了相同代码或建议的答案。其次，如果用户非常具体地询问了问题以及他需要解决什么问题，请不要添加过于复杂的答案。第三，如果您想就回答或问题提出任何建议，您可以添加评论。 –

如何水平放置iframe中心？

回答

相关问题