完美的中心与 Bootstrap 水平对齐答案

【问题标题】：Perfect center align horizontally with Bootstrap完美的中心与 Bootstrap 水平对齐
【发布时间】：2013-09-25 08:09:07
【问题描述】：

在使用 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

【问题讨论】：

添加您的.center 课程应该可以。将该类添加到按钮时会发生什么？
不行..感谢您的关注
此问题对于 3.x 和 4.x 已过时，请参阅：stackoverflow.com/a/42483682/171456

标签： html css twitter-bootstrap

【解决方案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

【讨论】：

【解决方案2】：

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

Obs：text-center 类已经存在于 Twitter 的引导代码中。

【讨论】：