Question

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

在我的脑海中，这应该可以轻松地使用具有100％宽度的周围Div扩展到投资组合大小，在另一个Div中具有边距左边和边距右边作为auto，其中心浮动到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类宽度，但如果它的响应能力是％，则会很好。< / p>

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

它会正常工作。希望它能帮到你。

为什么这些社交按钮不会以响应式设计为中心？

1 个答案: