CSS Center of Like Button

Question

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

Answer 1

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

Hope this helps...