如何在推特引导3中心按钮?

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

当前回答

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

2017-12-17 12:59:21

其他回答

你可以通过给这些元素一定的边距来实现。

例如

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

0px从上到下，auto从左到右。

2014-03-22 14:33:10

使用CSS属性text-align: center

2014-03-22 14:33:19

这对我很有用尝试创建一个独立的<div>，然后将按钮放入其中。就像这样:

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

然后转到你的CSSStyle页面，像这样做Text-align:center:

#contactBtn{text-align: center;}

2016-01-22 08:34:51

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>

您可以用另一个div包装标签和按钮，以保持它们彼此对齐。

例如,https://codepen.io/anon/pen/BJoeRY?editors=1000

2017-12-17 12:59:21

根据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所做的就是告诉元素的边距为0 auto, auto是左/右边距。但是，除非类text-center或css text-align:center;设置在父元素上，元素不知道从哪个点进行自动计算，因此不会像预期的那样居中。

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

2014-03-22 14:34:11

如何在推特引导3中心按钮?

推荐文章

最新文章

标签