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