title: fb-login-button and positioning
body: <p>I'm trying to avoid the modern cliche of having my own custom login system for my website, and instead I'm trying to use Facebook and Twitter as options that users can have to login to my site.  After several hours of browsing, I've discovered that incorporating Facebook into my website is about as easy as tying your shoes using only your teeth.</p>
  
  <p>I've managed to get the button to show up inside the proper div; however, I am unable to get the button to position itself in the center of the  tag that it lives in.</p>
  
  <p>My first question (of probably many) on this journey, is how can I center the button?  I've tried adding a style tag to the div, and that of course didn't work since Facebook actually replaces my div.  Thank you for any help you can provide.</p>
  
  <p>Edit: Adding in relevant code.</p>
  
  <pre><code>    Index.php:
      &lt;!--User System Start --&gt;
      &lt;script&gt;
        window.fbAsyncInit = function() {
          FB.init({
          appId      : '[MASKED]', // App ID
          channelUrl : '[MASKED]', // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });
  
      // Additional initialization code here
        };
  
     // Load the SDK Asynchronously
        (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
         }(document));
      &lt;/script&gt;
      &lt;div id="loginWrapper"&gt;
          &lt;div id="loginBar"&gt;
          &lt;section id="loginBarLeft"&gt;
          &lt;h1&gt;Step One: Login&lt;/h1&gt;
          &lt;div id="fb-root"&gt;&lt;/div&gt;
          &lt;div class="centered"&gt;&lt;fb:login-button&gt;Login With Facebook&lt;/fb:login-button&gt;&lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="loginBarCenter"&gt;Login Bar Center&lt;/section&gt;
      &lt;section id="loginBarRight"&gt;Login Bar Right&lt;/section&gt;
  &lt;/div&gt;
  &lt;div id="showHide"&gt;&lt;a href="#" id="showHideButton"&gt;Login or Register&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!--User System End --&gt;
  
      userSystem.css
      @charset "utf-8";
      /* CSS Document */
      body {
          margin-top: 0;
          padding-top: 0;
      }
      div#loginWrapper {
          width: 1024px;
          height: auto;
          margin: 0 auto;
          position: fixed;
          z-index: 2;
          left: 50%;
          left: 120px;
          top: 0
      }
      div#loginBar {
          width: 1024px;
          height: 300px;
          background: url(images/loginBar_background.png) repeat-x;
          color: #006;
          border-bottom-left-radius: 25px;
          box-shadow: 5px 5px 5px #000;
       }
       div#loginBar section#loginBarLeft {
          float: left;
          width: 33%;
          height: 300px;
       }
       div#loginBar section#loginBarLeft h1 {
          text-align: center;
          margin-top: 5px;
       }
  
        div#loginBar section#loginBarLeft .centered {
          height: 100px;
          width: 341px;
          margin: 0 auto;
        }
        div#loginBar section#loginBarCenter {
          float: left;
          width: 33%;
          height: 300px;
          border-right: 1px solid #FFF;
          border-left: 1px solid #FFF;
       }
        div#loginBar section#loginBarRight {
          float: left;
          width: 33%;
          height: 300px;
       }
       div#showHide {
          width: 200px;
          height: 25px;
          position: relative;
          left: 824px;
          background: #333;
          color: #FFF;
          text-align: center;
          border-bottom-left-radius: 15px;
          border-bottom-right-radius: 15px;
          box-shadow: 5px 5px 5px #000;
          z-index: 2;
       }
       div#showHide a {
          color: #CCC;
          text-decoration: none;
          font-weight: bold;
       }
      div#showHide a:hover {
          color: #FFF;
      }
  </code></pre>