Question

我知道这听起来非常简单并且可能是，但我一直在尝试使用margin：auto，text-align：center和其他方法使按钮居中，但没有一种方法有效。我知道你可以自定义按钮，但我对这个按钮很好，只想把它放在中心位置。 JSFiddle Code

   <html lang="en">

<head>
  <meta name="google-signin-scope" content="profile email">
  <meta name="google-signin-client_id" content="*******************.apps.googleusercontent.com">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:100,100i,400">
  <style>
    body {
      background-color: #37474f;
    }
    h1{
      color: white;
      font-family: "Roboto", sans-serif;
      font-weight: 500;

    }
    h3{
      color: white;
      font-family: "Roboto", sans-serif;
      font-weight: 100;

    }
    .center{
      margin-top: 10%;
      text-align:center;
    }
  </style>
</head>

<body>
<div class='center'>
  <img src="https://www.nssc.org/images/design/register-icon.png" alt="Logo" style="max-width:100px; max-height:100px;">
  <h1>Email Database</h1>
  <h3>Lorem Ipsum Dolor.</h3>
  <br><br><br>
  <div class="g-signin2" data-onsuccess="onSignIn" data-theme="light" data-width="300" data-height="50" data-longtitle="true"></div>
  <!--<a href="#" onclick="signOut();">Sign out</a>-->
  <div>
  <script>
    function onSignIn(googleUser) {
      // Useful data for your client-side scripts:
      var profile = googleUser.getBasicProfile();
      console.log("ID: " + profile.getId()); // Don't send this directly to your server!
      console.log('Full Name: ' + profile.getName());
      console.log('Given Name: ' + profile.getGivenName());
      console.log('Family Name: ' + profile.getFamilyName());
      console.log("Image URL: " + profile.getImageUrl());
      console.log("Email: " + profile.getEmail());

      // The ID token you need to pass to your backend:
      var id_token = googleUser.getAuthResponse().id_token;
      $.ajax({
        type: 'POST',
        data: {
          id_token: id_token
        },
        url: 'login_process.php',
        success: function(data) {
          //alert(data);
        }

      });
      //console.log("ID Token: " + id_token);
    }

    function signOut() {
      var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function() {
        console.log('User signed out.');
      });
    }
  </script>
</body>

</html>

Answer 1

将一些文字放入按钮，然后就可以了！ text-align黑客攻击中心将发挥作用。

即使你在那里放置一个按钮图像，它也会起作用！

请参阅fiddle

  <div class="g-signin2" data-onsuccess="onSignIn" 
      -theme="light" data-width="300" data-height="50"
      data-longtitle="true">button</div>

不知道这里的问题是什么。

编辑：

解决了！

使用this

.g-signin2{
  width: 100%;
}

.g-signin2 > div{
  margin: 0 auto;
}

Answer 2

只需将margin: auto添加到具有类.abcRioButton

的容器中

.abcRioButton.abcRioButtonLightBlue { margin: 0 auto;}

jsfiddle：https://jsfiddle.net/azizn/dL3uesrv/

Answer 3

margin:auto仅适用于固定宽度的元素。你有一个你的按钮包装器，它有margin：auto，但宽度只在子元素上设置。将两个规则放在一个元素上就可以了。

中心谷歌登录按钮

3 个答案: