0

我们在我们的网站上手动编写了 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;
}
4

1 回答 1

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.
}

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

于 2013-02-27T19:19:14.480 回答