如何在 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; 对其进行样式设置，然后使用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 的样式问题......您可能无法修复它...您也可以尝试为这些元素中的每一个提供一个相对位置，并移动它们直到它起作用。

Answer 3

它非常简单地将您的代码放入带有align="center"的 div 标签中

<div align="center">
"Your code mentioned above"
</div>

您可以访问我的不倒翁以查看与对齐中心的添加。