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>

如果按钮没有填满span4的整个div空间，我将无法获得真正的中心对齐。也许，我可以将内容扩展到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

Answer 2

如果你想要水平对齐这个按钮，你不需要添加新的类，只需使用.text-center这里是一个bin http://jsbin.com/UVeGejO/1/edit

Obs：text-center类已存在于twitter的bootstrap代码中。

完美的中心与Bootstrap水平对齐

2 个答案: