38

我正在使用 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>
4

8 回答 8

66

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

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

于 2013-07-19T12:15:17.370 回答
30

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

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

使用相应的 CSS 规则：

.centered
{
    text-align:center;
}

我必须查看btn该类的 CSS 规则，但我认为它没有指定宽度，因此auto左右边距不起作用。但是，如果您向按钮添加了spanorinput-规则之一，则自动边距将起作用。

编辑：

证实了我最初的想法；这些btn类没有定义宽度，因此您不能使用自动边距。此外，正如@AndrewM 所指出的，您可以简单地使用text-center该类而不是创建新的规则集。

于 2013-01-11T05:12:07.000 回答
18

包裹在一个带有“文本中心”类样式的 div 中。

于 2014-01-13T13:28:52.213 回答
11

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

于 2014-01-21T01:18:48.353 回答
4

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

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

和 CSS 将是：

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

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

史蒂夫

于 2013-12-25T16:25:24.277 回答
3 
.span7.btn { display: block;   margin-left: auto;   margin-right: auto; }

我对引导程序并不完全熟悉，但类似上面的东西应该可以解决问题。可能不需要包括所有类。这应该使按钮在其父项 span7 中居中。

于 2013-01-11T05:03:41.300 回答
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>
于 2015-08-15T04:06:33.320 回答
1

Bootstrap 有一个特定的类：center-block

<button type="button" class="your_class center-block"> Book </button>
于 2016-06-23T18:37:07.163 回答