当向左对齐时，iframe溢出出div容器

Question

所以我尝试在我的网站主页上添加一个Twitter iframe。我希望iframe在div容器中靠左对齐。问题是，每当我向左对齐时，它就会溢出div，而当我向右对齐时，它却完全适合。

有人能给我解释一下为什么会这样吗？以及如何修复它？

这是我在div/iframe中使用的代码：

<article>
    &nbsp;
    <div class="container"> 
        <iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    </div>
</article>

这是我用来设置样式的CSS：

.container {
    background-color: #FFFFFF;
    margin: 5em auto;
    padding: 25px;
    border-radius: 1.5em;
    width: 1200px;
    display: absolute;
}

iframe {
    float: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: block;
}

我只想让它适合左侧的div，而不是边缘或溢出。另外，我正在使用Chrome，但我注意到我的iframe没有显示在Edge上，这是有原因的吗？我没有得到任何错误，它只是出现了一个空白的，灰色的框。

我可能很快就会解决这个问题，所以我提前感谢所有有任何建议的人！

Answer 1

如果您查看iFrame CSS，它包含margin-left: auto和margin-right: auto。然后你有一个剩余的浮点数。自动在左边距和右边距将元素居中。卸下margin-left: auto。还有text-align: center..。

Answer 2

我不确定这是否是写这个问题时的拼写错误，但是display属性没有absolute值。

将display切换到position会导致以下结果：

​

.container {
  background-color: blue;
  margin: 5em auto;
  padding: 25px;
  border-radius: 1.5em;
  width: 1200px;

  /* Removed "display: absolute;" */
  position: absolute;
}

iframe {
  float: left;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

<article>
  &nbsp;
  <div class="container">
    <iframe src="https://www.twitter.com" width="270" height="400" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
  </div>
</article>

​

这听起来就是你想要的，因为它可以防止iframe溢出。当然，还有其他向右或向左对齐的方法，例如flexbox。