为什么这些社交按钮不在响应式设计中居中？

Question

我们已经在我们的网站上手动编写了 Twitter、Facebook 和 G+ 按钮，这些按钮在 ajax 产品组合中使用响应式设计。它们都彼此完美对齐，但问题是我们希望所有 3 个都居中，无论周围容器的大小如何。

在我的脑海中，这应该很容易与具有 100% 宽度以扩展到投资组合大小的周围 Div 一起工作，在另一个 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 类宽度你想要的任何东西，但如果它在 %'s 中会很好，因为它的响应能力。

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

它会正常工作。希望对你有帮助。