這些社交按鈕爲什麼不以響應式設計爲中心？

Question

我們在我們的網站上手動編制了Twitter，Facebook和G +按鈕，並在ajax產品組合中使用響應式設計。它們都完美地相互對齊，但問題是我們希望無論周圍容器的大小如何，所有3個都被居中。

在我的腦海中，這應該很容易與周圍Div有100％的寬度擴大到投資組合的大小，在另一個Div有左邊距和右邊距作爲自動漂浮在100％ div，然後在div的容器中按鈕。然而，由於某些原因，他們總是很難與左邊對齊。這是我目前的代碼。

下面是一個例子

http://themixtapesite.com/#/joe-budden-a-lose-quarter 

現在改變你的瀏覽器窗口，使之更小，所以你可以動態地看到所有的大小不同 - 我希望這些社交按鈕浮球集中在中間而不是左邊像他們現在..

<!-- Social sharing buttons --> 
    <div class="social-single"> 

    <div class="social-centre">  

    <div class="twit-button"><a href="https://twitter.com/share" class="twitter-share-button" data-via="mixtapes_4_free" data-lang="msa" data-related="realdannys" data-hashtags="mixtape">Tweet</a></div> 

    <div class="fb-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php wp_title('|', true, 'right'); ?>&amp;send=false&amp;layout=button_count&amp;width=71&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=118471234925480" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 71px; height: 21px;" allowTransparency="true"></iframe> 
         </div> 

    <div class="gplus-button"><g:plusone href="<?php echo urlencode(get_permalink($post->ID)); ?>" size="medium" annotation="bubble" width="50px"></g:plusone></div> 

    </div> </div> 

而CSS

/* Social Buttons */ 

.social-single { 
display: block; 
margin-left: auto; 
margin-right: auto; 
margin-top: 10px; 
margin-bottom: 10px; 
width: 100% !important; 
} 

.social-centre 
{ 
margin-left: auto; 
margin-right: auto; 
} 

.twit-button { 
float: left; 
margin: 0; 
margin-right: 5px; 
width: 80px; 
} 

.fb-button { 
float: left; 
margin: 0; 
width: 80px; 
} 

.gplus-button { 
float: left; 
margin: 0; 
width: 50px; 
} 

Answer 1

呦你已經使用margin-left: auto;和margin-right:auto;這很好。 你有所有的事情設置的響應方式。 但瀏覽器檢查每個元素的一件事，它的width以及height。 我們應該分別定義這些值，否則它會假定它沒有任何子元素。

我檢查了你的代碼，因爲我認爲你只需要添加一件東西 - 給.social-centre類的寬度，無論你想要什麼，但它會很好，如果它的響應率是％。

.social-centre 
{ 
margin-left: auto; 
margin-right: auto; 
width:50%; //example, whatever you want. 
} 

它會正常工作。希望它能幫助你。