fb-login-button и позиционирование

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

Я сумел расположить ГФ кнопку перед тем, как: Он не должен заменить ваш 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; }