Question

这是我认为会直截了当但却变得有点痛苦的事情。我试图将Facebook社交按钮集中在一个图标下方，你可以在这里看到它：

我对想法感到有些困惑，我已经尝试在div中强制执行它仍然不会让步......

 <div class="Facebook"><img src="http://creditworksusa.com/wp-content/uploads/2014/03/facebook-icon-png-white.png" width="30"/>
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FRazorRuddockRacing%3Ffref%3Dts&amp;width&amp;layout=button_count&amp;action=recommend&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=637719322983790" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px; display: block; margin: 0 auto;" allowTransparency="true"></iframe>
</div>


.Facebook{
    float: left; 
    background-color: #3B5998; 
    width: 50%;
    text-align:center;
    padding: 20px 0;
}

Answer 1

添加此功能将起作用：

iframe {
    display: block;
    width: 125px;
    margin: auto;
}

然而，随着更多数字被添加到类似，你的宽度也需要变大。这不是一个很好的解决方案，但是如果没有设置宽度，你就无法真正设置自动余量来使其工作。

Answer 2

Facebook社交按钮总是124px宽。只需给iframe一个宽度并使其居中。

iframe {
    width: 124px;
    text-align: center;
}

http://jsfiddle.net/ak2om8Lh/1/

Answer 3

将iframe包装到div中并添加边距：auto
在不改变包含div宽度的情况下使其居中，
这使您可以更自由地定位元素。

.frame{
    display: block;
    width: 100px;
    margin: auto;
}

中心对齐facebook分享按钮div

3 个答案: