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

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>

或

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

尝试将它们放在 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

将您的代码放在带有align="center" 的div 标记内非常简单

<div align="center">

"Your code mentioned above"

</div>

您可以访问 my tumbler 以查看 addthis 与居中对齐。