或者您可以给出特定的偏移量,使按钮位置只需要使用自举网格系统,
<div class="col-md-offset-4 col-md-2 col-md-offset-5"> <input type="submit" class="btn btn-block" value="submit"/>
这样,如果设置btn-block,也可以指定按钮大小。 当然,这只适用于md尺寸范围,如果你想设置其他尺寸,请使用xs,sm,lg。
您可以通过提供保证金或绝对定位这些元素来实现。
例如
.button{ margin:0px auto; //it will center them }
0px将来自顶部和底部,auto将来自左侧和右侧。
这个对我有用 试着做一个独立的 <div> 然后把 button 进入那个。 像这样 :
<div>
button
<div id="contactBtn"> <button type="submit" class="btn btn-primary ">Send</button> </div>
然后去你的 CSS 样式页面并执行 Text-align:center 像这样 :
CSS
Text-align:center
#contactBtn{text-align: center;}
的 添加到你的风格: 强>
显示:表; 保证金:0自动;
我有这个问题。我用了
<div class = "col-xs-8 text-center">
在我的div上包含几条h3线,一对h4线和一个自举按钮。 我使用文本中心后,除了按钮之外的所有东西都跳到了中心,所以我进入了我的css表覆盖引导程序并给了按钮一个
margin: auto;
这似乎解决了这个问题。
这是我在这里的第一个贡献,我希望它有所帮助!
使用 text-align: center css属性
text-align: center
Bootstrap 4更新:
使用带有'd-flex'和'justify-content-center'实用程序类的div设置包裹按钮以利用flexbox。
<!-- Button --> <div class="form-group"> <div class="d-flex justify-content-center"> <button id="singlebutton" name="singlebutton" class="btn btn-primary"> Next Step! </button> </div> </div>
使用flexbox的好处是能够在同一轴上添加其他元素/按钮,但具有各自独立的对齐方式。它还开启了与'align-items-start / center / end'类垂直对齐的可能性。
您可以使用另一个div来包装标签和按钮,以使它们彼此对齐。
例如 https://codepen.io/anon/pen/BJoeRY?editors=1000
您可以执行以下操作。它还避免了按钮重叠。
<div class="center-block" style="max-width:400px"> <a href="#" class="btn btn-success">Accept</a> <a href="#" class="btn btn-danger"> Reject</a> </div>
<div class="row"> <div class="col-sm-12"> <div class="text-center"> <button class="btn btn-primary" id="singlebutton"> Next Step!</button> </div> </div> </div>
<div class="container-fluid"> <div class="col-sm-12 text-center"> <button class="btn btn-primary" title="Submit"></button> <button class="btn btn-warning" title="Cancel"></button> </div> </div>