Center Google Sign In Button

13,300

Solution 1

Put some text into your button and there you go! The text-align hack for centering will come into play.

Even if you place a button image there, it will work!

See fiddle

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

Don't know what the issue here is.

EDIT:

Solved it!

Use this

.g-signin2{
  width: 100%;
}

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

Solution 2

Simply add margin: auto to the container with the class .abcRioButton

.abcRioButton.abcRioButtonLightBlue { margin: 0 auto;}

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

Share:
13,300

Related videos on Youtube

Sujay Garlanka
Author by

Sujay Garlanka

Updated on June 04, 2022

Comments

  • Sujay Garlanka
    Sujay Garlanka almost 2 years

    I know this sounds very simple and it could be, but I have been trying to center the button using margin: auto, text-align: center, and other methods and none have worked. I know you can customize the button, but I am fine with this button and just want to center it. 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>
    
  • Sujay Garlanka
    Sujay Garlanka over 7 years
    Sorry, I don't really understand. Could you edit some of the jsfiddle code if it doesn't take too long?
  • Sujay Garlanka
    Sujay Garlanka over 7 years
    The button wasn't showing in the old fiddle code. Now I updated it and am looking for the button to be centered.
  • kukkuz
    kukkuz over 7 years
    check the new fiddle I added.. does it suffice?
  • kukkuz
    kukkuz over 7 years
    The g-signin-2 must be full-width and then when you have its child auto margin, the div gets center aligned
  • Sujay Garlanka
    Sujay Garlanka over 7 years
    Works very well as well! Thank you! What is the abcRioButton class? How did you figure it out? Just want to know to tackle future issues.
  • Aziz
    Aziz over 7 years
    Just when you are inspecting an element, try to check its parent and how the layout is structured. Keep going up one level each time until you figure out which container should be adjusted.
  • jkeirstead
    jkeirstead almost 5 years
    If you're using Vue, you will need to remove the scoped property from your style block in order to get this to work.
  • Gagich
    Gagich over 3 years
    This was the cat's meow. Works great because I can't give the outer element a width because it changes after you sign in. So, this little nugget is Totes McGoats. Thank you!
  • CliffTheCoder
    CliffTheCoder over 2 years
    Yap. This works