fb登录按钮和定位

Question

我试图避免现代陈词滥调有我自己的自定义登录系统为我的网站，而是我试图使用Facebook和Twitter作为选项，用户可以登录到我的网站。经过几个小时的浏览之后，我发现将Facebook整合到我的网站上就像用你的牙齿绑鞋一样简单。

我设法让按钮显示在正确的div内;然而，我无法让按钮定位在它所居住的标签的中心。

我的第一个问题（可能很多）在这个旅程中，我该如何居中按钮？我试着给div添加一个样式标签，并且自从Facebook实际上替换了我的div以后，这当然就不起作用了。感谢您提供任何帮助。

编辑：添加相关代码。

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

我已经成功地定位像按钮之前的FB： 它不应该取代你的div，如果您的登录按钮设置类似例如使用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; }