居中对齐按钮，但左侧对齐文本

Question

我正在尝试创建一些纯CSS社交登录按钮。

但我无法弄清楚如何让文字左对齐，同时在按钮内居中。

文字＆＃34;登录Facebook＆＃34;超过＆＃34;使用Google登录＆＃34;因此，当按钮堆叠在一起时，文本不会排成一行。

我希望文本中心在按钮内对齐，但我希望它保持彼此对齐，以便单词＆＃34;登录＆＃34;为每个按钮排队。

以下是我想要实现的截图示例：

这是一个类似的问题和解决方案，但我无法使用hrefs而不是div：CSS: Center block, but align contents to the left

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我做了两个更改，即更改.shell属性text-align：center to left
和.social-connect-button span属性margin-left：.875em;保证金左：25％; 希望你得到你的答案为中心左对齐文本... :)

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

Answer 2

将text-align: left;添加到.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>

Answer 3

使用 text-align:left; 并根据需要添加一些余量 .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>