如何居中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登錄按鈕？

回答

相關問題