0

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>
Community
  • 1
  • 1
TinyTiger
  • 1,801
  • 7
  • 47
  • 92
  • Based on what you described, I don't think you can achieve both scenarios with different length of text in the buttons. – Stickers Nov 23 '16 at 05:32
  • the image and your code's result looks similar to me, just width is long in your case :/ – AVI Nov 23 '16 at 05:32

3 Answers3

1

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>
Akshit Khosla
  • 26
  • 2
0

add text-align: left; to .social-connect-button

.shell {
  text-align: center;
}
.social-connect-button {
  text-align: left;
  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>
jafarbtech
  • 6,842
  • 1
  • 36
  • 55
0

use text-align:left; and put some margin as you need to .shell a span.

.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: .875em;
  margin-right: .875em;
}
.shell a span{
  margin-left:4rem;
  }
<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>
ADH - THE TECHIE GUY
  • 4,125
  • 3
  • 31
  • 54