Question

我试图将twitter分享和facebook分享按钮对齐，以便与其余的布局设计保持一致，但我无法弄清楚如何做到这一点。我的主题是Tumblr的Eames主题。我想让它们彼此相邻，中心对齐。谢谢你的帮助！

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>

Answer 1

我不确定你究竟要求的是什么，但通常你可以用这样的东西：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;将它们放在同一行上，如好。

Answer 2

你可以：

在链接周围添加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>

OR

（更复杂，更迂回但可能有帮助）

尝试将它们放在div标记内，然后使用margin:0 auto 0 auto;width:INSERT WIDTH HERE;为其设置样式，然后使用float:left;设置div中的链接的样式。

您还可以通过为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的造型问题......你可能无法修复它...... 你也可以试着给这些元素中的每个元素一个相对的位置并移动它们直到它起作用。

Answer 3

将代码放在带有div

的align="center"标记内非常简单

<div align="center">

"Your code mentioned above"

</div>

您可以访问my tumbler以查看添加对齐中心的内容。

如何在Tumblr帖子中居中对齐共享按钮

3 个答案: