中心 twitter 嵌入 iframe答案

【问题标题】：Center twitter embed iframe中心 twitter 嵌入 iframe
【发布时间】：2014-07-16 18:01:52
【问题描述】：

我正在使用 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/

基本上，我要做的就是将 .row 中的 iframe 水平居中，但仅使用 CSS，因为我不控制任何与 iframe 内联的样式。 margin:0 auto; 似乎不起作用。

【问题讨论】：

标签： javascript html css iframe twitter

【解决方案1】：

我将假设您不能为我的回答更改此 iFrame 的内联样式。

问题是您的内联样式覆盖了您的 margin: 0 auto; 类。解决此问题的方法是将!important 像这样扔到您的margin: 0 auto; 类中......

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

jsfiddle

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

【讨论】：

您的建议应该有效。只是一个小评论； display: block 已经内联。所以 CSS 不需要它。

【解决方案2】：

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

frameborder="0"

在抵消边距的 iframe 上：0 auto，并且您在

之后缺少 "

style="display: block

在内联样式中。

如果您无法更改内联样式，请在 0 auto 之后添加 !important，如下所示：

margin:0 auto !important;

【讨论】：