Question

我有一个使用blogspot的客户，我已经尝试了我所知道的所有内容，试图将iframe放在中心位置。但是，我似乎无法让它发挥作用。这是我正在使用的代码和建议？

＆＃13;

<section id="content">
  <div class="ic"></div>
  <div class="container_12">
    <div class="wrapper">
      <div class="newswrap">
        <iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
          <p>Your browser does not support iFrames.</p>
        </iframe>
      </div>     
    </div>
  </div>
</section>

＆＃13;

Answer 1

尝试将显示块添加到您的iframe和margin：0 auto;

或者您可以向iframe添加一个显示：inline-block和.newswrap {text-align：center;}但请确保包装和newswrap的宽度为：100％

然后你的代码应该是：

.wrapper{width: 100%;} 
.newswrap{text-align: center;width: 100%;}
iframe{display:inline-block;}

Answer 2

iframe是内联元素，您可以通过css添加text-aling:center;来执行此操作，如下面的代码段所示。但是，由于您已经拥有宽度：iframe上的100％，您可能必须使用margin:0 auto;将容器与iframe对齐。此外，您的结构还有一个额外的结束</DIV>，这也是一个问题：

＆＃13;

.newswrap {
  text-align: center;
}

＆＃13;

<section id="content">
  <div class="ic"></div>
  <div class="container_12">
    <div class="wrapper">
      <div class="newswrap">
        <iframe src="http://metiriusnews.blogspot.com/" width="100%" height="800px">
          <p>Your browser does not support iFrames.</p>
        </iframe>
      </div>
    </div>
  </div>
</section>

＆＃13;

Answer 3

如果您不介意固定宽度，请尝试此操作，也可以调整宽度

<style type="text/css">
iframe{
    width: 800px!important;
    margin:auto;
}
</style>

如何使iFrame居中？

3 个答案: