Responsive design 为什么赢了'；这些社交按钮不是以响应性设计为中心吗？

我们已经在我们的网站上手动编程了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>

---

您已经使用了

marginleft:auto和
右边距：自动很好。
你已经把所有的事情都安排好了。
但有一件事浏览器会检查每个元素，它的
宽度
以及
高度
。
我们应该分别定义这些值，否则它将假定这些值，而不在其中包含任何子元素

我已经检查了你的代码，因为我认为你只需要添加一件事-给
.social centre
班级宽度任何你想要的，但如果它的响应速度是%，那就好了

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

它会正常工作的。希望能对您有所帮助。
嗯，我尝试了90%的宽度，但不幸的是没有，您可以在这里看到一个示例，
http://themixtapesite.com/#/joeBooDN-A亏损季度/代码>现在改变你的浏览器窗口，使它更小，这样你就可以动态地看到所有不同的大小-我希望这些社交按钮以中间而不是左边浮动，就像现在……嘿，丹尼只是重新检查你的代码。您不止一次使用body标签，浏览器假定所有内容都结束到第一个body标签。只需移除第一个闭合体标签。里面是社会中心阶层。如果可能的话，试着比现在更加语义化地维护代码。您在页面之间使用了脚本/样式，这在W3C指南中是不合适的。Akshaya，不确定您多次使用body标记是什么意思？它只有一次在我的源头，所有的内容都在中间。你在看来源吗？在这种情况下，您需要查看ajax页面的源代码，因为主页的源代码只会为您提供导航网格……另外，在我的php中，对于所有使用ajax的Wordpress，公文包（带有社交按钮）没有body标记。div标签都在正确的地方终止…？哦！所以它可能是wordpress问题（身体标签）。不管怎样，我已经在IDE中尝试了该代码，它工作正常。只需检查您的代码两次，否则，还有一件事，如果您对Wordpress主题定制不太确定，您可以通过Javascript或Jquery放置这些CSS属性。您可以检查显示：内联块；或显示：内联表。还可以使用百分比中的边距属性。我遇到的问题是，它必须是不同的宽度百分比，这取决于响应布局。对于桌面电脑，90%的尺寸是iPad/横向尺寸，50%的尺寸在这里工作得很好（单独设置它们没有问题，因为我可以在响应式CSS中这样做）。问题是当我谈到智能手机尺寸时，对于大多数智能手机来说，50%是完美的，但是当你使用较小的尺寸时，50%的宽度太窄，会将其中一个图标撞到下一行。我试着设置一个最小的像素宽度，但是div再次偏离中心。。。
.social-centre
{
margin-left: auto;
margin-right: auto;
width:50%; //example, whatever you want.
}