1

Twitter の共有ボタンと Facebook の共有ボタンを中央に配置して、残りのレイアウト デザインと一致するようにしようとしていますが、その方法がわかりません。私のテーマは Tumblr の Eames Theme です。それらを互いに隣り合わせに配置し、中央揃えにしたいと思います。助けてくれてありがとう！

www.alysonk.com

これが私のコーディングです。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="      {PhotoAlt}" data-via="alysonkdotcom">Tweet</a>
<script>
    !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0];
        if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
    }(document,"script","twitter-wjs");
</script>
<fb:like send="false" layout="button_count" width="450" show_faces="false" font="verdana"></fb:like>
4

3 に答える 3

3

あなたが何を求めているのか正確にはわかりませんが、一般的には次のようなものでできます：http://jsfiddle.net/k2cks/

jsfiddleに行かずに答えを探している人のために：

<div style="text-align:center;">
    <a href="#">Tweet</a> <a href="#">Like</a>
</div>​

基本的にはその周りにdivを置き、 でテキストを中央揃えにしますtext-align:center;。これはあなたが探していたものですか？明確にできますか？

編集:必要なものに似た例を含む別のjsfiddle: http://jsfiddle.net/k2cks/1/また、要素display:inline;を同じ行に配置する必要がある場合もあります。

于 2012-05-23T19:58:32.290 に答える
1

あなたは出来る：

リンクの周りに を置き、divリンクにdisplay:inline;スタイルを与えます。

<div style="text-align:center;">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="      {PhotoAlt}" data-via="alysonkdotcom">Tweet</a>
    <script>
        !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0];
            if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
        }(document,"script","twitter-wjs");
    </script>
    <fb:like send="false" layout="button_count" width="450" show_faces="false" font="verdana"></fb:like>
</div>

また

(より複雑で迂遠ですが、役立つ可能性があります)

それらをタグの中に入れてdivスタイルを与えてからmargin:0 auto 0 auto;width:INSERT WIDTH HERE;、div 内のリンクを でスタイルしてみてくださいfloat:left;。

divまた、背景色を指定することで視覚的にわかりやすくすることもできます。そして、後でそれを外すことができます。

<div style="margin:0 auto 0 auto; width:INSERT WIDTH HERE;">
    <a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-text="      {PhotoAlt}" data-via="alysonkdotcom" style="float:left;">Tweet</a>
    <script>
        !function(d,s,id){
            var js,fjs=d.getElementsByTagName(s)[0];
            if(!d.getElementById(id)){
            js=d.createElement(s);
            js.id=id;
            js.src="//platform.twitter.com/widgets.js";
            fjs.parentNode.insertBefore(js,fjs);
        }
        }(document,"script","twitter-wjs");
    </script>
    <fb:like send="false" layout="button_count" width="450" show_faces="false" font="verdana" style="float:left;"></fb:like>
</div>

回答の更新: スタイリングに関するtubmlrの問題である可能性があると思います...修正できない場合があります...これらの各要素に相対位置を与えて、動作するまで移動することもできます.

于 2012-05-23T22:10:47.570 に答える
-1

コードをdivタグ内に配置するのは非常に簡単ですalign="center"

<div align="center">

"Your code mentioned above"

</div>

私のタンブラーにアクセスして、 addthis を中央揃えで確認できます。

于 2013-12-05T10:13:51.477 に答える