中心对齐按钮，但左对齐内部文本

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

“使用Facebook登录”的文本比“使用Google登录”的文本长，因此当按钮堆叠在一起时文本不排列。

我希望文本中心在按钮内对齐，但我希望它左对齐，以便每个按钮的单词“登录”排队。

这里是什么，我想达到的截图例如：

这里有一个类似的问题和解决办法，但我可以把它用的HREF不div的工作不是：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>

来源

2016-11-23 bennygill

根据你所描述的，我不认为你可以实现不同长度的按钮文本的这两种方案。 – Stickers

图像和你的代码的结果看起来类似于我，只是宽度在你的情况很长：/ – AVI

两个变化：中心向左
和。社会-CONNECT键跨度财产保证金左：。 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>

来源

2016-11-23 05:44:53

这是完美的谢谢你！ – bennygill

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

我做，这就是
变化.shell财产的text-align

来源

2016-11-23 05:29:04 jafarbtech

使用text-align:left;，并把一些余量，因为你需要.shell跨度。

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

来源

2016-11-23 05:53:07

中心对齐按钮，但左对齐内部文本

回答

相关问题