如何在Twitter Bootstrap 3中将按钮居中?


259

我正在Twitter Bootstrap中构建表单,但是在将按钮置于表单输入下方的中心时遇到问题。我已经尝试过将center-block类应用于按钮,但这没有用。我该如何解决?

这是我的代码。

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Answers:


569

用“文本中心”类在div中包装Button。

只需更改此:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

对此:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

编辑

作为BootstrapV4center-block滴入#19102赞成m-*-auto


1
即使在基金会的情况下也可以使用)
DivByZero

35

根据Twitter Bootstrap文档:http : //getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

该类center-block要做的就是告诉元素的auto边距为0,其中auto为左/右边距。但是,除非类text-center或css text-align:center; 是在父对象上设置的,元素不知道要从中进行此自动计算的点,因此不会使自己居中。

在此处查看上面的代码示例:https : //jsfiddle.net/Seany84/2j9pxt1z/


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

这是为我工作的那个。我在上面尝试了其他方法,但不会居中。
mjwrazor

如何对input元素执行相同操作?
InfZero

8

添加到您的样式:

显示:表;保证金:0自动;


5
不知道您如何得出这个结论。
Fergus

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

2
尽管此代码可以回答问题,但提供有关此代码为何和/或如何回答问题的其他上下文,可以提高其长期价值。
Ajean'7

5

您可以通过提供边距或绝对定位这些元素来实现。

例如

.button{
  margin:0px auto; //it will center them 
}

0px将来自顶部和底部,而auto将来自左侧和右侧。


5

我尝试了以下代码,它为我工作。

<button class="btn btn-default center-block" type="submit">Button</button>

按钮控件位于div中,并且使用bootstrap的center-block类帮助我将按钮与div的中心对齐

检查链接,您将在其中找到中心块类

http://getbootstrap.com/css/#helper-classes-center



3

Bootstrap 4的更新:

使用div集将按钮包装起来,该div集具有'd-flex'和'justify-content-center'实用工具类,以利用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


1

您可以执行以下操作。这也避免了按钮重叠。

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

1

对我来说,尝试使自己独立,<div>然后投入其中是button可行的。像这样 :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

然后转到“ CSS样式”页面并执行Text-align:center以下操作:

#contactBtn{text-align: center;}

0

对于Bootstrap 3

我们用列划分空间,我们使用8个小列(col-xs-8),我们留下4个空列(col-xs-offset-4)并应用属性(center-block)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

对于Bootstrap 4

我们使用Spacing,Bootstrap包含各种缩写和填充的响应余量实用程序类,以修改元素的外观。这些类使用xs的{property} {sides- {size}格式和sm,md,lg和xl的{property} {sides- {breakpoint}-{size}格式命名。

此处提供更多信息:https : //getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

尽管此代码段可以解决问题,但提供说明有助于提高响应质量。请记住,您将来会为读者回答这个问题,而这些人可能不知道您提出代码建议的原因。
Stefan Crain

0

我有这个问题。我用了

<div class = "col-xs-8 text-center">

在我的div中,包含几行h3行,几行h4行和一个Bootstrap按钮。在我使用text-center之后,除了按钮之外的所有内容都跳到了中心,因此我进入了覆盖Bootstrap的CSS工作表并为按钮设置了一个

margin: auto;

这似乎已经解决了问题。


-2

或者您可以使用引导网格系统指定特定的偏移量以将按钮位置定位在所需的位置,

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.