bennygill bennygill - 16 days ago 5
CSS Question

Center align buttons but left align the text inside

I'm trying to create some pure CSS social login buttons.

But I can't figure out how to get the text to left align, while centered inside the button.

The text "Login with Facebook" is longer than "Login with Google" and therefore the text doesn't line up when the buttons are stacked on top of each other.

I want that text center aligned within the button, but I want it to left aligned to each other so that the word "Login" lines up for each button.

Here is a screenshot example of what I want to achieve:

enter image description here

Here is a similar question and solution, but I can't get it working with a hrefs not divs: CSS: Center block, but align contents to the left



.shell {
text-align: center;
}
.social-connect-button {
display: inline-block;
text-decoration: none;
line-height: 2.65em;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
font-size: 18px;
color: #fff!important;
}
.fb-login {
background-color: #3b589e;
margin-bottom: .7em;
}
.google-login {
background-color: #dd4c39;
cursor: pointer;
}
.fb-login i {
float: left;
background: #37528C;
padding: 0 .4em;
border-radius: 5px 0 0 5px;
}
.google-login i {
float: left;
background: #37528C;
padding: 0 .4em;
border-radius: 5px 0 0 5px;
}
.social-connect-button span {
margin-left: .875em;
margin-right: .875em;
}

<div class="shell">

<a class="social-connect-button fb-login" href="[facebook-login-url]">
<i>ICON</i>
<span>Login with Facebook</span>
</a>

<a class="social-connect-button google-login" href="[google-login-url]">
<i>ICON</i>
<span>Login with Google</span>
</a>

</div>




Answer

two changes I have made and that's
change .shell property text-align:centre to left
and .social-connect-button span property margin-left: .875em; to margin-left: 25%; Hope you got your answer as centred left aligned text...:)

.shell {
  text-align: left;
}
.social-connect-button {
  display: inline-block;
  text-decoration: none;
  line-height: 2.65em;
  display: block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  font-size: 18px;
  color: #fff!important;
}
.fb-login {
  background-color: #3b589e;
  margin-bottom: .7em;
}
.google-login {
  background-color: #dd4c39;
  cursor: pointer;
}
.fb-login i {
  float: left;
  background: #37528C;
  padding: 0 .4em;
  border-radius: 5px 0 0 5px;
}
.google-login i {
  float: left;
  background: #37528C;
  padding: 0 .4em;
  border-radius: 5px 0 0 5px;
}
.social-connect-button span {
  margin-left: 25%;  
/*margin-left: .875em;*/
  margin-right: .875em;
}
<div class="shell">

  <a class="social-connect-button fb-login" href="[facebook-login-url]">
    <i>ICON</i>
    <span>Login with Facebook</span>
  </a>

  <a class="social-connect-button google-login" href="[google-login-url]">
    <i>ICON</i>
    <span>Login with Google</span>
  </a>

</div>