如何将Facebook登录按钮居中？

Question

如何将Facebook登录按钮居中？

4

我只是想做一个简单的测试并将Facebook按钮居中。我的初步想法是只需居中div标签。然而，我已经尝试了所有我能想到的方法，如text-align，使用css margin：auto等，但似乎都不起作用。

我该如何将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>

编辑：添加截图

- thecodingmate

你有CSS吗？你尝试使用JQuery吗？因为那个函数看起来有点问题... - James Douglas

你的 JavaScript 在 HTML 页面上没有任何作用。请提供一个代码片段以展示问题。 - DCR

我删除了应用程序字符串ID。如果您在Facebook中添加新应用程序，它将为您创建所需的脚本，以便包含 https://developers.facebook.com/docs/facebook-login/web/login-button - thecodingmate

2个回答

-1

好的，我有一个可行的答案。最终我用一个外部居中的div包裹了内部的div，这似乎起作用了。就像这样：

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

当然，还需要添加上面列出的适当的CSS。

- thecodingmate

请检查编辑时间。在我回答问题之前，他的解决方案并没有起作用，然后他进行了更改。当他进行编辑时，出于礼貌我接受了他的解决方案。 - thecodingmate

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Douglas · Accepted Answer

这是最简单的例子：

#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>