居中显示 Twitter 嵌入式 iframe。

Question

我正在使用Twitter oembed api，并在我的网页中添加以下代码：

<div class='row'>

   <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" style="display: block; max-width: 99%; min-width: 220px; padding: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin: 10px 0px; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); border-width: 1px; border-style: solid; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; position: static; visibility: visible; width: 500px;" title="Embedded Tweet" height="186"></iframe>
   <script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>

http://jsfiddle.net/EzeG2/

我想做的就是将iframe水平居中在.row里面，但只能使用CSS，因为我无法控制内联到iframe中的任何样式。 margin:0 auto;似乎不起作用。

- the_

Answer 1

我假设您无法更改此iFrame的内联样式，来回答您的问题。问题在于您的内联样式覆盖了您的 margin: 0 auto; 类。解决方法是在您的 margin: 0 auto; 类中加入 !important，如下所示。

.row iframe{
    margin:0 auto !important;
    display:block;
}

jsfiddle

如果您可以编辑iFrame的内联样式，那么您可以删除margin:10px 0px;或将其编辑为您想要的结果margin:10px auto;

- mituw16

---

你的建议应该是可行的。只是一个小注释：display: block已经是内联的了，所以在CSS中不需要它。 - Ramy Nasr

Answer 2

据我所知，代码不能正常工作的唯一原因是因为你有一个

标签。

frameborder="0"

在iframe上抵消margin: 0 auto，并且你在

后面缺少一个双引号。

style="display: block 

在行内样式中。

如果您无法更改行内样式，则在0 auto后面添加!important，如下所示：

margin:0 auto !important;

- Sam Denton