我试图避免为我的网站拥有自己的自定义登录系统的现代陈词滥调,相反,我试图使用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;
}
我之前已经设法定位了fb like按钮:如果您的登录按钮设置类似,例如使用 XFBML,它不应该替换您的div。
.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; }