fb-login-button and positioning

Question

自分のウェブサイトに独自のカスタムログインシステムを使用するという現代的な仕掛けを避けようとしています。代わりに、ユーザーがログインできるオプションとしてFacebookとTwitterを使用しようとしています私のサイト。数時間のブラウジングの後、私は自分のウェブサイトにFacebookを組み込むことは、あなたの靴だけを使って靴を結ぶことと同じくらい簡単だということを発見しました。

ボタンを適切なdiv内に表示することができました。しかし、私はボタンがそれが住んでいるタグの中央に位置するようにボタンを得ることができません。

私はこのボタンをどのように中心に置くことができますか？私はdivにスタイルタグを追加しようとしましたが、実際にFacebookが私のdivに取って代わり、当然動作しませんでした。ご提供いただけるお手伝いをありがとうございます。

編集：関連するコードを追加する。あなたのログインボタンは、セットアップに類似例えばある場合、それはあなたのdiv要素を置き換えるべきではありません ：前に私は、ボタンのようなFBを配置するために管理してきました

Index.php: 
    <!--User System Start --> 
    <script> 
     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)); 
    </script> 
    <div id="loginWrapper"> 
     <div id="loginBar"> 
     <section id="loginBarLeft"> 
     <h1>Step One: Login</h1> 
     <div id="fb-root"></div> 
     <div class="centered"><fb:login-button>Login With Facebook</fb:login-button></div> 
    </section> 
    <section id="loginBarCenter">Login Bar Center</section> 
    <section id="loginBarRight">Login Bar Right</section> 
</div> 
<div id="showHide"><a href="#" id="showHideButton">Login or Register</a></div> 
    </div> 
    <!--User System End --> 

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

Answer 1

XFBMLを使用してください。

HTMLあなたはこのような何かを試してみたいことがあり、あなたの特定の問題のため

<p>Click on <span class="fb-like"><fb:like href="http://www.facebook.com/somepage" send="false" width="49" show_faces="false" font="arial"></fb:like></span> to become fan and enter lalalalala some form.</p> 

CSS

.fb-like { display: inline-block; height: 28px; overflow: hidden; position: relative; top: 6px; width: 48px; } 

：

HTML

<div class="table"> 
    <div class="centered"><fb:login-button show-faces="false" width="200" max-rows="1"></fb:login-button></div> 
</div> 

CSS

.centered { display: table-cell; vertical-align: middle; } 
.table { display: table; height: 400px; }