居中一个Twitter Bootstrap按钮

Question

我正在使用Twitter Bootstrap制作一个表单，但是很难把按钮居中。它包含在一个具有7个间距的span的div内。以下是HTML代码，按钮位于底部。请问如何将其居中显示？

<div class="form span7">
  <div id="get-started">
    <div id="form-intro">
      <strong><h1>1. Get Started: Some basics</h1></strong>
    </div>
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="inputSaving">What are you saving for?</label>
        <div class="controls">
          <input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="description">Add a short description</label>
        <div class="controls">
          <textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="categoryselect">Choose a Category</label>
        <div class="controls">
          <select class="span4" id="categoryselect">
            <!-- Add some CSS and JS to make a placeholder value-->
            <option value="Kittens">Kittens</option>
            <option value="Keyboard Cat">Keyboard Cat</option>
            <option value="Twitter Bird">Twitter Bird</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="imageselect">Choose an image</label>
        <div class="controls span4">
          <img src="piggyimage.png" id="imageselect" alt="image-select" />
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="goal">Your Saving Goal</label>
        <div class="controls">
          <input type="text" class="span4" id="goal" placeholder="$1337">
        </div>
      </div>
      <button class="btn btn-large btn-primary" type="button">Submit</button>
    </form>
  </div>
</div>

- Tom Maxwell

Answer 1

Bootstrap有自己的居中类名，叫做text-center。

<div class="span7 text-center"></div>

- Lucas Santos

---

最佳答案使用API。 - Subtubes

很遗憾，它不能与<div class="btn-group btn-group-lg span7">一起使用！ - TOPKAT

Answer 2

如果您不介意有更多的标记，这将起作用：

<div class="centered">
    <button class="btn btn-large btn-primary" type="button">Submit</button>
</div>

使用对应的CSS规则：

.centered
{
    text-align:center;
}

我需要查看btn类的CSS规则，但我认为它没有指定宽度，因此自动左右边距不起作用。如果将其中一个span或者input-规则添加到按钮上，则自动边距会生效。

编辑：

确认了我的初始想法；btn类没有定义宽度，因此无法使用自动侧边栏。 此外，正如@AndrewM所指出的那样，您可以直接使用text-center类而无需创建新的规则集。

- Tieson T.

---

更好的是，您可以使用Bootstrap中的"text-center"类，而无需自己编写CSS。例如：<div class="text-center"><button class="btn btn-large btn-primary" type="button">提交</button></div> - mildog8

Answer 3

用“text-center”类样式包裹

- Vladimir Dimchev

---

这对我起作用了，即使视口大小导致Bootstrap把按钮放到下一行，我的按钮仍然会保持居中。' <div class="col-sm-1 text-center"> <input type="submit" value="再次搜索" class="btn btn-primary"/> </div>' - Chris Everitt

Answer 4

这个问题有点老，但是简单的方法是将.center-block应用于按钮。

- TimNguyenBSM

---

问题在于这会使按钮的宽度也填满其容器。 - scrowler

这对我来说完全没问题，但只有在使用表单<button>时才有效。将btn类应用于填充父元素的<div>会导致问题。 - Malkierian

Answer 5

因为您想要居中按钮，而不是文本，所以我过去所做的是添加一个类，然后使用该类来居中按钮：

<button class="btn btn-large btn-primary newclass" type="button">Submit</button>

相应的CSS代码如下：

.btn.newclass {width:25%; display:block; margin: 0 auto;}

“width”值由您决定，您可以通过调整它来达到合适的外观。

史蒂夫

- Steve

---

为什么要强制元素显示为块级元素呢？最好使用Bootstrap内置的解决方案。 - rakeden

Answer 6

.span7.btn { display: block;   margin-left: auto;   margin-right: auto; }

我对Bootstrap不是非常熟悉，但像上面这样做应该可以解决问题。可能不需要包含所有类。这将使按钮在其父元素span7内居中显示。

- Ronnie

Answer 7

Bootstrap有一个特定的类用于此：center-block。

<button type="button" class="your_class center-block"> Book </button>

- Gregory

Answer 8

如果您有多个按钮，那么可以执行以下操作。

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

- Rusty