【问题标题】:How to center an iframe horizontally?如何将 iframe 水平居中?
【发布时间】:2012-01-12 02:38:09
【问题描述】:

考虑以下示例:(live demo)

HTML:

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

CSS:

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

结果:

为什么iframe 不像div 那样居中对齐?我怎样才能集中对齐它?

【问题讨论】:

  • 为什么不为这个 iframe 包装一个 div?

标签: html css iframe alignment center-align


【解决方案1】:

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>

【讨论】:

  • 谢谢!我应该猜到 inline frame 是一个内联元素 :)
  • 这就是“i”的含义。
  • 所以,或者,您可以给容器一个text-align: center 规则,对吗?
  • 是的,将 text-align: center 添加到容器中也可以
  • 我发现我还必须添加margin: auto;
【解决方案2】:

您可以将 iframe 放入 &lt;div&gt;

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

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

【讨论】:

    【解决方案3】:

    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;
    
    }
    

    【讨论】:

      【解决方案4】:

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

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

      【讨论】:

      • 仅当父元素的样式 text-align 设置为 center 时。
      【解决方案5】:

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

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

      【讨论】:

      • 这是为了让 iframe 中的视频有响应,效果很好,谢谢!
      【解决方案6】:

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

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

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

      【讨论】:

      • 我认为align 属性已被弃用?为什么 OP 应该使用这种方法而不是使用 CSS - 有什么优势?
      • style="text-align:center" 不会被弃用,并且会做同样的工作
      • 即使它已被折旧,它仍然有效,而其他一切都不起作用。
      • 这适用于 HTML 文件,因此对于像我这样的新手来说更容易实现。我是2017年才做的,所以不能贬值。感谢您的提示!
      • html5 中的 align 属性已被删除(尽管它可以工作 - 虽然不适用于 Wordpress 或 Github 等严格的 HTML5 平台)并且 text-align 不能在 iframe 上工作
      【解决方案7】:

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

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

      【讨论】:

      • 请看这个第一个how-to-answer 这个问题之前已经回答过了,显然,你可以在这里添加你的答案。但是在回答之前,您需要了解一些要点。首先,不要添加以前使用相同代码或建议添加的答案。其次,如果用户已经非常具体地询问了问题以及他需要解决什么问题,请不要添加过于复杂的答案。第三,如果您想对答案或问题提出任何建议,可以添加评论。
      【解决方案8】:

      你可以试试

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

      希望对你有用

      link

      【讨论】:

        【解决方案9】:

        在这里,我为所有难以在屏幕中心水平制作 iframe 或图像的人设置了 sn-p。 如果你喜欢,请给我点赞。?⯅。

        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】:

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

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

          【讨论】:

            【解决方案11】:

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

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

            【讨论】:

            • 这为我完成了这项工作,谢谢!不清楚为什么同样的事情在 iframe 上不起作用,但嵌套它有帮助。
            【解决方案12】:

            我最简单的解决方案。

            iframe {
                margin:auto;
                display:block;
            }
            

            【讨论】:

              【解决方案13】:

              &lt;iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FRishabh-Cars-Jodhpur-110479104559774&amp;tabs=timeline&amp;width=500&amp;height=1200&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;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"&gt;&lt;/iframe&gt;

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

              【讨论】:

                猜你喜欢
                • 2013-06-12
                • 2014-11-09
                • 1970-01-01
                • 1970-01-01
                • 2013-10-10
                • 1970-01-01
                • 2012-12-27
                • 1970-01-01
                • 2010-09-11
                相关资源
                最近更新 更多