283

考虑以下示例：（现场演示）

HTML：

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

CSS：

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

结果：

在此处输入图像描述

为什么iframe不像中央对齐div？我怎么能集中对齐它？

4

13 回答 13

447

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

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

iframe {
    display: block;
    border-style:none;
}
<div>div</div>
<iframe src="data:,iframe"></iframe>

于 2011-12-03T10:14:49.650 回答
63

在您的网页上居中 iframe 的最佳方式和更简单的方法是：

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

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

于 2015-11-15T14:18:56.030 回答
22

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-03T10:20:13.907 回答
17

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

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>
于 2017-07-18T15:46:40.807 回答
13

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

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

于 2014-10-13T18:38:23.767 回答
7

我最简单的解决方案。

iframe {
    margin:auto;
    display:block;
}
于 2020-10-13T10:10:03.830 回答
5

您可以将 iframe 放入<div>

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

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

于 2011-12-03T10:18:17.217 回答
5

你可以试试

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

我希望它对你有用

关联

于 2018-04-25T04:02:58.890 回答
4

在我的情况下，解决方案是在 iframe 类中添加：

    display: block;
    margin-right: auto;
    margin-left: auto;
于 2020-05-31T08:23:45.357 回答
4

如果您无法访问 iFrame 类，则将下面的 css 添加到包装器 div。

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>
于 2020-09-23T18:28:49.383 回答
3

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

margin-left: auto;margin-right: auto;
于 2014-09-25T16:18:40.277 回答
0

在这里，我为所有在屏幕中心水平制作 iframe 或图像的人提供了代码片段。如果你愿意，请给我点赞。⯅。

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

于 2020-05-31T06:26:03.583 回答
0

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&tabs=timeline&width=500&height=1200&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="500" height="1200" style="border:none;overflow:hidden;display:block;margin:0 auto;" scrolling="yes" frameborder=".6" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>

使用它并将 facebook 嵌入到 html 页面中心的 iframe 中

于 2022-02-07T10:50:10.260 回答