Я просто пытаюсь сделать простой тест и отцентрировать кнопку facebook. Моя первоначальная мысль - мне просто нужно центрировать тег div. Тем не менее, я попробовал все, что могу придумать, например, выравнивание текста, используя 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>

Редактировать: добавлен скриншот

description

3
thecodingmate 27 Май 2017 в 20:52

2 ответа

Лучший ответ

Это самый простой пример:

#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>
2
James Douglas 28 Май 2017 в 06:37

Хорошо, у меня есть ответ, который работает. Я закончил тем, что обернул внутренний div внешним div, который центрирован и, кажется, работает. Так что-то вроде

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

И, конечно же, добавив соответствующий CSS, указанный выше.

-1
thecodingmate 27 Май 2017 в 23:16