Javascript 中心twitter嵌入iframe
我正在使用Twitter oembed api,现在我的页面上有以下代码:Javascript 中心twitter嵌入iframe,javascript,html,css,iframe,twitter,Javascript,Html,Css,Iframe,Twitter,我正在使用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:
<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>
基本上,我所要做的就是将iframe水平居中放置在.row中,但只使用CSS,因为我不控制任何与iframe内联的样式<代码>边距:0自动代码>似乎不起作用。我假设您无法更改此iFrame的内联样式以获取我的答案 问题是您的内联样式覆盖了
边距:0 auto代码>类。解决方法是抛出!重要信息
转到您的页边距:0自动代码>像这样的类
.row iframe{
margin:0 auto !important;
display:block;
}
如果可以编辑iFrame的内联样式,则可以删除边距:10px 0px编码>或编辑您所需的页边距:10px自动代码>据我所知,代码不能正常工作的唯一原因是因为您
frameborder="0"
在计算边距的iframe上:0 auto,您缺少一个“after”
在内联样式中
如果无法更改内联样式,请在0自动后添加!重要信息,如:
margin:0 auto !important;
你的建议应该有效。只需一个小注释;display:block
已经内联。因此CSS不需要它。
margin:0 auto !important;