html - 居中对齐 facebook 分享按钮 div

Question

我认为这是一件很简单的事情，但结果却有点痛苦。我正在尝试将图标下方的 Facebook 社交按钮居中对齐，您可以在此处看到它:

Demo Fiddle

我的想法有点卡住了，我试过将它强制放在一个 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;
}

但是，随着更多的数字被添加到类似的内容中，您的宽度也需要变大。这并不是一个很好的解决方案，但如果不设置宽度，您就无法真正将边距设置为自动来使其正常工作。