完美的中心与Bootstrap水平对齐

Question

在使用Bootstap进行水平中心对齐时,我可以选择一些选项.

我可以使用offset类或使用空白span类作为占位符.另一个选项可以是使用自定义对齐,如下所示

.center {
    float: none;
    margin: 0 auto;
}

这些选项都没有解决我的问题,因为div容器的内容必须填充100%的宽度.

假设我有以下内容

<div class="container-fluid">
    <div class="row-fluid">
      <div class="span4 offset4">
        <button class="btn">1-1</button>
        <button class="btn">1-2</button>
      </div>
    </div>
</div>

如果按钮没有填满整个div空间span4,我将无法获得真正的中心对齐.也许,我可以将内容扩展到100%,但我不知道这是否是一个好的做法.

在这里,我有一个可以玩的画布.JS BIN

Answer 1

由于你有内联元素,你可以.text-center在跨度上使用类,也可能最好使用偏移而不是空元素:

HTML

<div class="row-fluid">
  <div class="span4 offset4 text-center">
    <button class="btn">1-1</button>
    <button class="btn">1-2</button>
  </div>
</div>

更新的演示:http://jsbin.com/ayuFEhO/2/edit