我试图避免为我的网站拥有自己的自定义登录系统的现代陈词滥调，而是尝试使用 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;
}