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/
Related videos on Youtube
Author by
Sujay Garlanka
Updated on June 04, 2022Comments
-
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 over 7 yearsSorry, I don't really understand. Could you edit some of the jsfiddle code if it doesn't take too long?
-
Sujay Garlanka over 7 yearsThe button wasn't showing in the old fiddle code. Now I updated it and am looking for the button to be centered.
-
kukkuz over 7 yearscheck the new fiddle I added.. does it suffice?
-
kukkuz over 7 yearsThe
g-signin-2
must be full-width and then when you have its child auto margin, the div gets center aligned -
Sujay Garlanka over 7 yearsWorks 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 over 7 yearsJust 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 almost 5 yearsIf you're using Vue, you will need to remove the
scoped
property from your style block in order to get this to work. -
Gagich over 3 yearsThis 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 over 2 yearsYap. This works