中心對齊Facebook分享按鈕div

這是我認爲會很直接，但結果是有點痛苦。我試圖居中對齊Facebook的社交按鈕的圖標下，你可以在這裏看到：中心對齊Facebook分享按鈕div

我有點堅持的想法，我試圖迫使它一個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; 
}

來源

2014-09-22 stacking

你撥弄沒有表現出任何結果 – dippas 2014-09-22 14:49:10

@dippas上運行 – 2014-09-22 14:50:32

點擊我想我可以幫你，但究竟是你想中心，我找不到，在小提琴 – 2014-09-22 14:51:17

添加這將工作：

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

然而，隨着越來越多的數字被添加到喜歡，你的寬度需要得到更大的到O操作。這並不是一個很好的解決方案，但是如果沒有設置寬度，您無法將邊距設置爲自動以使其起作用。

來源

2014-09-22 14:51:44 James

Facebook社交按鈕始終爲124px寬。只要給iframe一個寬度並居中就可以了。

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

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

來源

2014-09-22 14:51:54

只是想知道，在那裏是指示它總是124px寬的文檔？我在這裏找不到任何引用：https：//developers.facebook.com/docs/plugins/like-button – Alex 2014-09-22 14:54:25

檢查詹姆斯他的答案。當喜歡的數量增加時，寬度將改變。你需要用JS來解決它。抱歉。 http://stackoverflow.com/a/25977036/3398302 – 2014-09-22 14:55:17

感謝您的建議傢伙。 – stacking 2014-09-22 15:05:58

-1

裹的iframe到一個div並添加保證金：汽車
居中，這不會更改包含div寬度，
，讓你更自由地你的元素位置。

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

來源

2014-09-22 15:10:32 yoyo1990

中心對齊Facebook分享按鈕div

回答

相關問題