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 <DIV> background color to red. I did this to see the horizontal alignment of the like button and text.

Here is my code...

<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&g开发者_StackOverflowt;
        <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>

I tried one of the suggestions on this site to just place <CENTER></CENTER> tags around the <DIV>... 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?

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

Hope this helps...

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:

<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>

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.

You had the right idea. The problem is that the contents of the "Like button" are rendered inside of an IFRAME. So your CSS doesn't get picked up inside the IFRAME.

Many years later...

Sample code as provided from 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>

Change the two instances of width=320 to width=150. That is:

<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>

Haven't tested this solution extensively, but seems to work for Chrome desktop/mobile at various screen sizes. Haven't tried using it for JS SDK either. As well, note that it's for the "button" layout and that it's a total hack instead of a proper solution. ;-) Feel free to change the 150 to something more suitable for your purposes.

If you are using bootstrap it can be done the following way, it will not be centered symmetric but it was enough for me.

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