【问题标题】：How to center a width unknown button in a bootstrap's span?如何在引导程序的跨度中居中宽度未知按钮？
【发布时间】：2011-10-29 18:18:53
【问题描述】：

我有一个由backbone.js 和jQuery.tmpl() 生成的按钮，并且按钮的宽度是不同的。我想把它放在一个 span6 div 中。代码如下：

<div class="row">
  <div class="span6">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
  <div class="span10">
    ...
  </div>
</div>

我不知道如何让按钮在 div 中居中。

【问题讨论】：

我在 Twitter 上使用 bootstrap css 框架。他们的link

标签： css twitter-bootstrap

【解决方案1】：

我不是 CSS 专家，但这对我有用（在 span6 中居中按钮）：

<div class="row">
  <div class="span6" style="text-align:center">
    <button class="btn primary large">
      BLABLABLA
    </button>
  </div>
</div>

更多关于居中的信息can be found here。

【讨论】：

引导程序 3：
xxx

【解决方案2】：

有点晚了，但你可以使用 bootstrap 中的以分页为中心的类

<div class="span6 pagination-centered">
  <button class="btn primary large">
    BLABLABLA
  </button>
</div>

【讨论】：

【解决方案3】：

`<a>` 标签呢？

如果您有一个<a> 标记按钮，那么其他方法将不起作用，因为a.btn 在引导源中有一个float: left 属性。

<div style="text-align: center;">
    <a href="#" class="btn">Button text</a>
</div>

这可以通过两种方式撤消。

解决方案 1

添加自定义的less文件并导入引导程序。

bootstrap-custom.less

@import "bootstrap.less";
a.btn {
    float: none !important;
}

然后编译你的自定义less文件，或者简单地在另一个CSS文件中指定它：

styles.css

a.btn {
    float: none !important;
}

解决方案 2

只需使用style="float: none;" 内联：

<div style="text-align: center;">
    <a href="#" class="btn" style="float: none;">Button text</a>
</div>

【讨论】：

谢谢！这非常有帮助。

【解决方案4】：

其他解决方案

<div class="row-fluid pagination-centered">
<a href="#" class="btn btn-large">Button</a>
    </div>
<div class="clearfix"></div>

【讨论】：

【解决方案5】：

我遇到了同样的问题，我把它包起来了

<a class="btn btn-primary" href="#" role="button">Text Here</a>

成为

<div class="text-center">
<a class="btn btn-primary" href="#" role="button">Text Here</a>
</div>

【讨论】：

&lt;a&gt; 标签呢？

解决方案 1

解决方案 2

`<a>` 标签呢？