Styling doesn't help align Facebook button

I have a page here that has 开发者_StackOverflow中文版a div with an Facebook recommend button.

http://www.comehike.com/hiking.php

I put this styling around the Facebook code

        <div style="align:center">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
        </div>

But it doesn't align to the middle of that div. Any ideas on how to get it to center-align?

A div is a block-level element, so you would center it with left and right margins set to auto, and by giving it a width smaller than its parent:

.style-me {
  margin: 0 auto 0 auto;
  width: 450px;
}

Change 450 on the div and iframe to whatever you need it to be. I'm not sure about the end result you are going for here.

What you align is the iframe it generates not the this tag:

View the Dom using firebug or inspector you will see what i am saying

UPDATE:

It will be easier to style the parent element, for example the containing div:

<div class="style-me">
<script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script>
<fb:like href="" send="true" width="450" show_faces="false" action="recommend" font=""></fb:like>
</div>

CSS:

.style-me {
   ...rules
}