如何水平放置iframe？

234

考虑以下示例：（live demo）

HTML：

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

CSS：

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

结果：

在此处输入图片说明

为什么iframe不能像那样集中对齐div？我如何集中对齐？

— 米莎·莫罗什科（Misha Moroshko）
source

6

为什么不为此iframe包装一个div？

— Giberno

384

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

— 阿罗奇
source

28

谢谢！我应该猜到an inline frame是一个内联元素:)

— Misha Moroshko 2011年

33

这就是“ i”的意思。

— Aayush

11

因此，您也可以给容器一个 text-align: center规则，对吗？

— KOVIKO 2014年

1

是的，添加text-align：将容器居中也可以

— chrisweb 2014年

9

我发现我也不得不添加margin: auto;

— MarkyDD

45

将iframe定位在您网页上的最佳方法是：

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

其中width和height将是html页面中iframe的大小。

— 佩德罗
source

1

我以为该align属性已弃用？为什么OP应该使用这种方法而不使用CSS-有什么优势？

— andrewsi 2015年

4

style="text-align:center"不被弃用，会做同样的工作

— 安东尼

即使它已贬值，此方法仍然有效，而其他所有方法均无效。

— user819490

这在HTML文件中有效，因此对于像我这样的新手来说更容易实现。我只是在2017年做到了，所以它绝对不能贬值。谢谢你的提示！

— Renel Chesak

20

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;

}

— mgraph
source

11

如果要将视频放入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 {
	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%;
}

展开摘要

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

— 诺尔
source

这是为了使iframe中的视频响应良好，效果很好，谢谢！

— 里卡多

11

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

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

— 塔萨尔·索尼（Tushar Soni）
source

请首先查看此“如何解答”。显然，您可以在此处添加答案。但是您需要在回答之前理解一些要点。首先，不要添加先前使用相同代码或建议添加的答案。其次，如果用户已经非常明确地询问了问题及其解决方案，请不要添加过于复杂的答案。第三，如果您想提出有关答案或问题的任何建议，可以添加评论。

— ankit suthar

6

您可以将iframe放在 <div>

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

之所以有效，是因为它现在位于block元素内。

— Sonal Khunt
source

3

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

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

— 布萨克
source

1

仅当父元素的样式text-align设置为center时。

— parvus

3

你可以试试

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

我希望它对您有用

链接

— 凯尔
source

1

就我而言，解决方案是在iframe类上添加：

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

— 内齐尔
source

0

在这里，我为所有苦苦使iframe或图像水平放置在屏幕中央的人添加了代码段。如果愿意，请给我THUMBS UPVOTE。👍⯅。

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

展开摘要

— 曼森·帕特尔（Manthan Patel）
source