1

我正在尝试将 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>
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

你可以：

在链接周围加上 adiv并给链接一个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 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 回答