CSS Center of Like Button

微信扫一扫,分享到朋友圈

CSS Center of Like Button

I have done my research and haven’t found any good information on my problem. If you go to www.metrochristianguide.com, you will see that I placed a “Like” button on the top of the page, and set the


background color to red. I did this to see the horizontal alignment of the like button and text.

Here is my code…

(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'));

I tried one of the suggestions on this site to just place
tags around the


… that didn’t work. I have also tried using CSS style, “text-align: center;”… that also didn’t work.

Does anyone have any other suggestions?

The good news is that your div
is centering, but your Like button iframe is 500 pixels wide. That’s the extra red space you’re seeing. You can adjust the width of the iframe in the like button code:

The data-width
attribute controls the width of the iframe. You can adjust it to suit your needs, but it will need an explicit width, the iframe that Facebook dynamically generates for the button can’t collapse to the content within.

A data-width=400
is pretty close to the right width for me on Chrome. But the contents will change depending on who’s viewing, whether any of their friends have “liked” it, etc.

微信扫一扫,分享到朋友圈

CSS Center of Like Button

3 common mistakes when using Angular + NGRX + FIREBASE

上一篇

A Short History of Chaosnet

下一篇

你也可能喜欢

CSS Center of Like Button

长按储存图像,分享给朋友