中心缩略图按钮引导程序答案

【问题标题】：Center Thumbnail Button Bootstrap中心缩略图按钮引导程序
【发布时间】：2013-01-01 02:31:33
【问题描述】：

我正在使用最新版本的引导程序，但我似乎无法弄清楚如何在以下代码中使按钮居中。我只想要这个特定的缩略图而不是全局的，所以我无法更改 css。

<div class="row">   
  <ul class="thumbnails">
    <li class="span4">
      <div class="thumbnail">
        <img src="http://placehold.it/400x200" alt="">
        <h3>Need A Price?</h3>
        <p>Fill in the Quote form and get a price within   30mins,We know you dont like waiting around</p>
          <div class="btn-group">
            <button class="btn btn-primary">Get A Quote</button>
          </div>
      </div>
    </li>
 </ul>
</div>

【问题讨论】：

标签： button twitter-bootstrap center

【解决方案1】：

如果您只想将那个按钮居中，那么您可以利用 .btn-group 容器并使用您自己的类来定位该元素，这样您就可以将该区域定义为 display: block 并简单地对齐中心像这样的按钮：

CSS

.btn-centered {
  text-align: center;
  display: block;
}

HTML注意.btn-centered 容器上使用的.btn-group 类。

<div class="row">   
  <ul class="thumbnails">
    <li class="span4">
      <div class="thumbnail">
        <img src="http://placehold.it/400x200" alt="">
        <h3>Need A Price?</h3>
        <p>Fill in the Quote form and get a price within   30mins,We know you dont like waiting around</p>
          <div class="btn-group btn-centered">
            <button class="btn btn-primary">Get A Quote</button>
          </div>
      </div>
    </li>
 </ul>
</div>

演示：http://jsbin.com/ubiwip/2

【讨论】：

【解决方案2】：

这似乎对我有用：

<p align="center"><a href="#" class="btn btn-primary btn-block">TEST</a></p>

【讨论】：