中间对齐按钮，但左对齐内的文本

Question

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

但我不知道如何使文本左对齐，同时在按钮内居中。

文本“登录与Facebook”比“登录与谷歌”更长，因此当按钮堆叠在一起时，文本不会对齐。

我希望这个文本中心在按钮内对齐，但我希望它能彼此对齐，这样“登录”这个词就会对着每个按钮。

下面是我想要实现的一个截图示例：

​

​

这里有一个类似的问题和解决方案，但我无法让它使用hrefs：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 1

我做了两个改变，那就是

更改.shell属性文本-对齐:中间到左

社会连接按钮span属性边距-左：.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>

​