Question

我正在使用Twitter Bootstrap创建一个表单，并且我很难将按钮置于中心位置。它包含在一个跨度为7的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>

Answer 1

Bootstrap拥有自己的名为 text-center 的中心类。

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

Answer 2

如果你不介意多一点标记，这将有效：

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

使用相应的CSS规则：

.centered
{
    text-align:center;
}

我必须查看btn类的CSS规则，但我认为它没有指定宽度，所以auto左边和{右边距不起作用。如果您向该按钮添加了span或input-规则之一，则自动边距会有效。

修改

证实了我最初的想法; 的btn类的宽度已定义，因此您无法使用自动边距。另外，正如@AndrewM注释，您只需使用text-center类而不是创建新规则集。

Answer 3

包裹使用“text-center”类设置的div。

Answer 4

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

Answer 5

由于您希望将按钮居中，而不是文本，我过去所做的就是添加一个类，然后使用该类将按钮居中：

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

，CSS将是：

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

“宽度”值取决于您，您可以使用它来获得正确的外观。

史蒂夫

Answer 6

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

我对bootstrap并不完全熟悉，但是上面的内容应该可以解决问题。可能没有必要包括所有类。这应该将按钮置于其父级内部，即span7。

Answer 7

Bootstrap有一个特定的类：中心块

categoriesCheckComboBox.getItems().setAll(items);

以Twitter Bootstrap按钮为中心

7 个答案: