【问题标题】:How to align iframe always in the center如何始终在中心对齐 iframe
【发布时间】:2014-01-02 04:49:17
【问题描述】:

我有一个被 div 元素包围的 iframe,我只是想将它始终定位在中心。 这是我的 jsfiddle 工作:jsfiddle

并且真的相信有人可以提供帮助,因为我确信这很简单,但我就是看不到。

这是 HTML 本身:

<div id="top-element">Some div that has greater width than the inner div</div>
<div id="iframe-wrapper">
    <iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>

【问题讨论】:

    标签: html css iframe alignment


    【解决方案1】:

    居中 iframe

    编辑:FLEX 解决方案

    &lt;div&gt; 上使用display: flex

    div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    

    JSFiddle:https://jsfiddle.net/h9gTm/867/

    一种解决方案是:

    div {
      text-align:center;
      width:100%;
    }
    div > iframe{
      width: 200px;
    }
    <div>
      <iframe></iframe>
    </div>

    JSFiddle:https://jsfiddle.net/h9gTm/

    编辑:添加垂直对齐

    css:

    div {
        text-align: center;
        width: 100%;
        vertical-align: middle;
        height: 100%;
        display: table-cell;
    }
    div > iframe{
      width: 200px;
    }
    div,
    body,
    html {
        height: 100%;
        width: 100%;
    }
    body{
        display: table;
    }
    

    JSFiddle:https://jsfiddle.net/h9gTm/1/

    【讨论】:

    • 刚刚编辑更改边距自动,因为它不适用于 iframe,而是使用 text-align 来代替它
    • margin:auto 如果您将 iframe 显示为块,则适用于 iframe :) iframe {display:block;margin:auto;} jsfiddle.net/EnmD6/5
    • 只是为了真正确保其输入还添加:border:0;边距:0;到你的身体 CSS
    • 使用这个,我无法调整 iframe 的大小。如何做到这一点?
    • iframe css 中有一个错误,刚刚修复它,谢谢@biozalp
    【解决方案2】:

    试试这个:

    #wrapper {
        text-align: center;
    }
    
    #wrapper iframe {
        display: inline-block;
    }
    

    【讨论】:

      【解决方案3】:

      我想如果你添加 margin: auto;到下面的 div 它应该可以工作。

      div#iframe-wrapper iframe {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          right: 100px;
          height: 100%;
          width: 100%;
      }
      

      【讨论】:

        【解决方案4】:

        如果您只想在页面上显示 iframe,我能想出的不需要 div 或 flex 的最简单的解决方案是:

        html {
            width: 100%;
            height: 100%;
            display: table;
        }
        
        body {
            text-align: center;
            vertical-align: middle;
            display: table-cell;
        }
        

        然后 HTML 就是:

        <html>
          <body>
             <iframe ...></iframe>
          </body>
        </html>
        

        如果这就是你所需要的,那么你不需要包装 div 来完成它。这也适用于文本内容。

        Fiddle.

        另外this 看起来更简单。

        【讨论】:

          【解决方案5】:

          您可以轻松地使用 display:table 垂直对齐内容,使用 text-align:center 水平对齐 iframe。 http://jsfiddle.net/EnmD6/7/

          html {
              display:table;
              height:100%;
              width:100%;
          }
          body {
              display:table-cell;
              vertical-align:middle;
          }
          #top-element {
              position:absolute;
              top:0;
              left:0;
              background:orange;
              width:100%;
          }
          #iframe-wrapper {
              text-align:center;
          }
          

          带有表格行的版本http://jsfiddle.net/EnmD6/9/

          html {
              height:100%;
              width:100%;
          }
          body {
              display:table;
              height:100%;
              width:100%;
              margin:0;
          }
          #top-element {
              display:table-row;
              background:orange;
              width:100%;
          }
          #iframe-wrapper {
              display:table-cell;
              height:100%;
              vertical-align:middle;
              text-align:center;
          }
          

          【讨论】:

          • 但是当你尽可能地最小化窗口时,看看 iframe 是如何超出其周围 div 的右边界的(顶部的橙色背景)
          • 添加垂直到正文填充或垂直边距到 iframe 容器以保持安全区域。否则,继续使用 display 和 display 顶部元素和 iframe-container 作为 table-row ...这个演示是你的提示,看看通过 idsplay:table/table-cell/table-row 等可以轻松完成事情开。
          • @GCyrillius 伙计们,我想告诉你的是 iframe 超出了它周围的 div。只需挤压结果窗口并滚动到右端,看看它是如何超出橙色 div 的右边界的。
          • oups,抱歉,我没有更新 jsfiddle,请参阅 jsfiddle.net/EnmD6/9 并误解了您的意思,只是希望显示绝对位置的默认值 :)
          • @GCyrillius 现在看起来不错,但我不知道您是否注意到在我的垂直调整大小示例中,没有显示窗口滚动,而只有 iframe 滚动发生了变化。检查:jsfiddle.net/EnmD6
          【解决方案6】:

          首先删除div#iframe-wrapper iframe中的position:absolute删除 position:fixed所有其他cssdiv#iframe-wrapper

          然后应用这个css,

          div#iframe-wrapper {
            width: 200px;
            height: 400px;
            margin: 0 auto;
          }
          

          FIDDLE DEMO

          【讨论】:

          • 这完全行不通,因为它不会滚动 iframe 本身
          • @mathinvalidnik 你想在页面滚动时滚动 iframe 吗??
          • 是的。否则它会固定在窗口上。另外,如果窗口上的垂直滚动不显示,那就太好了。
          • @mathinvalidnik 检查我更新的答案。检查更新的小提琴
          【解决方案7】:

          您可以使用 CSS 并添加一个容器和一个样式以使其居中

          <style>
          .container { 
            height: 75px;
            position: relative;
            border: none;
          }
          
          .center {
            margin: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
          }
          </style>
          

          粘贴后添加一个 div 到 iFrame,然后它应该看起来像这样

          <div class="container">
            <div class="center">
              <iframe src="embbeded form link here" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
            </div>
          </div>
          

          【讨论】:

            【解决方案8】:

            很简单:

            1. 您只需将 iframe 放在两者之间

               <center> ...  </center>
              
            2. 一些

               <br>
              

            。就是这样。

            【讨论】:

            • 请不要使用这个。 HTML 4 中已弃用中心标签。
            猜你喜欢
            • 1970-01-01
            • 2019-12-14
            • 2013-04-19
            • 1970-01-01
            • 2016-05-21
            • 1970-01-01
            • 1970-01-01
            • 2014-03-02
            • 2013-11-27
            相关资源
            最近更新 更多