如何水平居中iframe?

时间:2011-12-03 10:12:00

标签: html css iframe alignment center-align

请考虑以下示例:(live demo

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那样集中对齐?我怎样才能集中对齐它?

12 个答案:

答案 0 :(得分:343)

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

答案 1 :(得分:31)

在您的网页上以iframe为中心的最佳方式和更简单的方法是:

>>> test_list = [1, 28, 3, 4, 27, 8, 7, 6, 5]
>>> insert_top_to_bottom(test_list)
>>> test_list = [8, 7, 6, 1, 28, 3, 4, 27, 5]

value = deck[-1] # value of the last element

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

答案 2 :(得分:19)

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;

}

答案 3 :(得分:10)

如果您要在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%;
}

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

答案 4 :(得分:7)

用于对齐iframe元素的最简单代码:

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

答案 5 :(得分:6)

您可以将iframe放在<div>

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

它有效,因为它现在位于块元素内。

答案 6 :(得分:3)

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

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

答案 7 :(得分:3)

你可以尝试

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

我希望它对你有用

link

答案 8 :(得分:3)

在我的情况下,解决方案是在iframe类上添加:

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

答案 9 :(得分:0)

在这里,我为所有正在水平制作iframe或图像的人添加了代码段。 如果您愿意,请给我THUMBS UPVOTE。?⯅。

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>

答案 10 :(得分:0)

如果无法访问iFrame类,则在css下方添加到包装div中。

<div style="display: flex; justify-content: center;">
    <iframe></iframe>
</div>

答案 11 :(得分:0)

我最简单的解决方法。

iframe {
    margin:auto;
    display:block;
}