twitter-bootstrap 将引导按钮与随附文本水平居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34854831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontally center-align a bootstrap button with accompanying text
提问by Abhilash
I am trying to horizontally center-align a bootstrap button with accompanying text. But am not getting the expected output. Could someone tell me why its not centering?
我正在尝试将引导按钮与随附的文本水平居中对齐。但我没有得到预期的输出。有人能告诉我为什么它不居中吗？
<div class="col-md-12 well">
<div class="col-md-6">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center">
<span><em> Already have an account? Login</em></span>
</div>
</div>
I created a Plunker demo. In smaller screens it works as expected. But in larger screens it's not aligned properly.
我创建了一个Plunker 演示。在较小的屏幕上，它按预期工作。但在较大的屏幕中，它没有正确对齐。
采纳答案by Abhilash
After some fiddling around I found a solution..Its not a bootstrap solution. But its only few lines of css. If anyone found a bootsrap way post here and I will change the accepted answer. Thank you.
经过一番摆弄之后，我找到了一个解决方案......它不是一个引导解决方案。但它只有几行css。如果有人在这里找到引导方式，我将更改已接受的答案。谢谢你。
<div class="row well row-centered">
<div class="col-md-6 col-centered">
<h2 class="btn btn-warning btn-lg center-block">Sign in via google</h2>
</div>
<div class="col-md-6 text-center col-centered" >
<span><em> Already have an account?Login
</div>
</div>
here is the custom css
这是自定义 css
/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
回答by KrisD
Use col-md-offset-3along with col-md-6to center align your content:
使用col-md-offset-3withcol-md-6来居中对齐您的内容：
<div class="col-md-offset-3 col-md-6">
...
</div>
Further more, set text-centerclass on the outside div and not on span tag:
此外，text-center在外部 div 上设置class 而不是在 span 标签上：
<div class="col-md-offset-3 col-md-6 text-center">
<em> Already have an account? Login</em>
</div>
See fiddle here.
请参阅此处的小提琴。
回答by Karl Dawson
Try this:
试试这个：
.flex-centered {
display: flex;
justify-content: center;
margin-top: 31px;
height: 46px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12 well">
<div class="col-md-6 text-center">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6">
<div class="flex-centered">
<em> Already have an account? Login</em>
</div>
</div>
</div>回答by Govind Kumar
use div outside of span tag
在span标签外使用div
<div style="text-align:center;" ><span class="text-center"><em> Already have an account? Login</em></span>
</div>
回答by Nofi
Try this code...
试试这个代码...
<body>
<div class="row">
<div class="col-md-6 col-md-push-3">
<h2 class="btn btn-warning btn-lg btn-block">Sign in via google</h2>
</div>
<div class="col-md-6 col-md-offset-3">
<span><em> Already have an account? Login</em></span>
</div>
</div>
</body>
