html - fb-login-button 和定位

Question

我试图避免为我的网站拥有自己的自定义登录系统的现代陈词滥调，而是尝试使用 Facebook 和 Twitter 作为用户必须登录我的网站的选项。经过几个小时的浏览，我发现将 Facebook 纳入我的网站就像只用 dentry 系鞋带一样简单。

我已经设法让按钮显示在正确的 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; }