0

私たちは、ajaxポートフォリオでレスポンシブデザインを使用するサイトでTwitter、Facebook、G+ボタンを手動でプログラムしました。それらはすべて互いに完全に整列していますが、問題は、周囲のコンテナのサイズに関係なく、3つすべてを中央に配置することです。

私の頭の中では、これはポートフォリオサイズに拡張するために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;それは良いです。あなたはすべてのものを応答性の方法で設定しています。しかし、ブラウザがすべての要素をチェックすることの1つは、その要素widthと同様heightです。これらの値を個別に定義する必要があります。そうしないと、内部に子要素がなくても想定されます。

私はあなたのコードをチェックしました、そしてあなたがただ一つのことを追加する必要があると思うので-.social-centreあなたが望むものは何でもクラス幅を与えます、しかしそれがその応答性のために％であるならばそれは良いでしょう。

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

そして、それは正しく動作します。お役に立てば幸いです。

于 2013-02-27T19:19:14.480 に答える