点赞按钮的 CSS 中心

Question

我已经完成了研究，但没有找到关于我的问题的任何好的信息。如果您访问 www.metrochristianguide.com，您会看到我在页面顶部放置了一个“喜欢”按钮，并将

背景颜色设置为红色。我这样做是为了查看类似按钮和文本的水平对齐方式。

这是我的代码...

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr><td id='relative' width='100%' height="98">
        <img src='images/2011_gold_banner.jpg' border='0' width='100%' height='98'>
        <div style='position: absolute; top: 25px; left: 50px;'>
            <a href='http://www.metrochristianguide.com'><img src='images/new_2011_logo_trans.gif' border='0'></a>
        </div>
        <center><div id="fb-root"></div>
        <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        </script>
        <div style='text-align: center; background-color: red; float: center; top: -58px;' class="fb-like" data-href="http://www.facebook.com/pages/Metro-Christian-Guide/214303935583" data-send="false" data-width="500" data-show-faces="false" data-font="arial" data-action="recommend"></div>

我尝试了该网站上的建议之一，将

标签放置在

周围。 ..那不起作用。我也尝试过使用 CSS 样式，“text-align: center;”...但这也不起作用。

有人还有其他建议吗？

Answer 1

.fb-like {text-align: center;}
.fb_iframe_widget {display: block !important;}

希望这有帮助...

Answer 2

好消息是您的 div 居中，但“赞”按钮 iframe 的宽度为 500 像素。这就是您看到的额外的红色空间。您可以在like按钮代码中调整iframe的宽度：

<div style='text-align: center; background-color: red; float: center; top: -58px;' class="fb-like" data-href="http://www.facebook.com/pages/Metro-Christian-Guide/214303935583" data-send="false" data-width="500" data-show-faces="false" data-font="arial" data-action="recommend"></div>

data-width属性控制iframe的宽度。您可以调整它以满足您的需求，但它需要明确的宽度，Facebook 为按钮动态生成的 iframe 无法折叠到其中的内容。

data-width=400 非常接近我在 Chrome 上的正确宽度。但内容会根据观看者、他们的朋友是否“喜欢”等而改变。

Answer 3

你的想法是正确的。问题在于“Like 按钮”的内容是在 IFRAME 内部呈现的。所以你的 CSS 不会在 IFRAME 中被获取。

Answer 4

许多年后...

https://developers.facebook 提供的示例代码。 com/docs/plugins/like-button# ：

<iframe src="https://www.facebook.com/plugins/like.php?href=<your URL>&width=320&layout=button&action=like&size=large&share=true&height=65&appId=XXX" width="320" height="65"...></iframe>

将 width=320 的两个实例更改为 width=150。也就是说：

<iframe src="https://www.facebook.com/plugins/like.php?href=<your URL>&width=150&layout=button&action=like&size=large&share=true&height=65&appId=XXX" width="150" height="65"...></iframe>

尚未广泛测试此解决方案，但似乎适用于各种屏幕尺寸的 Chrome 桌面/移动设备。也没有尝试过将它用于 JS SDK。另请注意，它是针对“按钮”布局的，并且它是一个彻底的黑客而不是正确的解决方案。 ;-) 请随意将 150 更改为更适合您的目的的值。

Answer 5

如果您使用引导程序，可以按照以下方式完成，它不会居中对称，但这对我来说已经足够了。

<div class="row">
<div class="col-md-2 col-md-offset-5">
here put all facebook like code
</div>
</div>