Sujay Garlanka Sujay Garlanka - 1 year ago 427
CSS Question

Center Google Sign In Button

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

<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="*******************">
<script src=""></script>
<script src="" async defer></script>
<link rel="stylesheet" type="text/css" href=",100i,400">
body {
background-color: #37474f;
color: white;
font-family: "Roboto", sans-serif;
font-weight: 500;

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

margin-top: 10%;

<div class='center'>
<img src="" alt="Logo" style="max-width:100px; max-height:100px;">
<h1>Email Database</h1>
<h3>Lorem Ipsum Dolor.</h3>
<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>-->
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;
type: 'POST',
data: {
id_token: id_token
url: 'login_process.php',
success: function(data) {

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

function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');


Answer Source

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"

Don't know what the issue here is.


Solved it!

Use this

  width: 100%;

.g-signin2 > div{
  margin: 0 auto;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download