【发布时间】：2017-04-07 00:04:10
【问题描述】：
我正在尝试创建一些纯 CSS 社交登录按钮。
但我不知道如何让文本左对齐，同时在按钮内居中。
“Login with Facebook”文本比“Login with Google”长，因此当按钮堆叠在一起时，文本不会对齐。
我希望文本中心在按钮内对齐，但我希望它彼此左对齐，以便每个按钮的“登录”一词对齐。
这是我想要实现的截图示例：
这是一个类似的问题和解决方案，但我无法使用 hrefs 而不是 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>【问题讨论】：
-
根据您的描述，我认为您无法在按钮中使用不同长度的文本来实现这两种情况。
-
图像和您的代码结果看起来与我相似，只是宽度在您的情况下很长：/