如何居中Facebook登录按钮？

我只是想做一个简单的测试和中心facebook按钮。我最初的想法是我只需要中心div标签。但是，我试过所有我能想到的东西像text-align，使用css margin：auto，似乎没有任何工作。如何居中Facebook登录按钮？

如何将facebook登录按钮居中放置在我的html页面中心？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
</head> 
<body> 

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 

    if (d.getElementById(id)) return; 

    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=x"; 
    fjs.parentNode.insertBefore(js, fjs); 
    } 
    (document, 'script', 'facebook-jssdk')); 
</script> 

<div class="fb-login-button" data-max-rows="1" 
    data-size="large" data-button-type="continue_with" data-show-faces="false" 
    data-auto-logout-link="false" data-use-continue-as="false"> 
</div> 

</body> 
</html>

编辑：加入截图

来源

2017-05-27 thecodingmate

你有任何的CSS？你是否尝试使用JQuery？因为这个功能看起来不对...... –

你的js不会在你的html页面上做任何事情。提供一个显示问题的片段 – DCR

我删除了应用程序字符串ID。如果你在Facebook中添加一个新应用程序，它会创建你需要的脚本，包括https://developers.facebook.com/docs/facebook-login/web/login-button – thecodingmate

这是最简单的例子：

#center { 
 
    margin: 0 auto; 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <div id="center"> 
 
     <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="false">Hello</div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-05-27 18:11:44

这正是我所尝试的，但它不会不要中心。我也将CSS添加到HEAD标记中。如果我使用id中心创建一个新的div，并且像“hello”这样的简单中心，但不是facebook登录按钮div标记。 – thecodingmate

@thecodingmate我编辑了我的答案。您需要使用ID为'center'的div封装登录按钮，而不是登录按钮本身。 –

@thecodingmate哦，你也打败了我吧！ –

好吧，我有问题的解答。我最终用一个外部div来封装内部div，这个div是以中心为中心的，而且似乎可行。所以像

<div id="center"> 
    <div ... 
</div>

而且，当然，添加上面列出的相应的CSS。

来源

2017-05-27 23:16:48 thecodingmate

如何居中Facebook登录按钮？

回答

相关问题