如何将一个Bootstrap div与一个“spanX”类alignment？
我使用bootstrap，并试图中心一个div（span7）像这样：
<div class="row-fluid"> <div id="main" class="span7"> Lorem ipsum dolor sit amet </div> </div> 我的CSS代码是：
#main{ margin:0px auto; }
但它不是在中心。 我如何设置中心？
Twitter的bootstrap .span类浮动到左侧，所以它们不会以通常的方式居中。 所以，如果你想让它span你的span只需在你的#main规则中添加float:none即可。
CSS
#main { margin:0 auto; float:none; }
顺便说一下，如果你的span类是偶数（例如span8 ），你可以添加一个offset类来居中它 – 对于span8 ，这将是offset2 （假设默认的12列网格），对于span6 ，它将是offset3等等基本上，如果从网格中的总列数中减去span number，剩余列的数量就减半）。
更新 Bootstrap 3 重命名了很多类，所以所有的span*类应该是col-md-* ，并且offset类应该是col-md-offset-* ，假设你使用的是中等响应的网格。
我在这里创build了一个快速演示，希望它有帮助： http : //codepen.io/anon/pen/BEyHd 。
如果有人希望真正的解决scheme使用bootstrap row-fluid在一个跨度内alignment两个图像和文本，这里是（如何实现这个和解释如下我的例子）：
CSS
div.row-fluid [class*="span"] .center-in-span { float: none; margin: 0 auto; text-align: center; display: block; width: auto; height: auto; }
HTML
<div class="row-fluid"> <div class="span12"> <img class="center-in-span" alt="MyExample" src="/path/to/example.jpg"/> </div> </div> <div class="row-fluid"> <div class="span12"> <p class="center-in-span">this is text</p> </div> </div>
用法：要使用此CSS在一个范围内对图像进行居中，只需将.center-in-span类应用于img元素，如上所示。
要使用这个CSS在一个范围内对文本进行居中，只需将.center-in-span类应用到p元素，如上所示。
说明：这个CSS的作品，因为我们重写特定的引导样式。 与其他答案的显着不同之处在于宽度和高度设置为auto，因此您不必使用固定的（适合dynamic网页）。 此外，将边距设置为自动，文本alignment：中心和显示：块的组合，同时处理图像和段落。
让我知道这是否足够彻底，方便实施。
更新
从BS3开始，有一个.center-block助手类。 从文档：
// Classes .center-block { display: block; margin-left: auto; margin-right: auto; } // Usage as mixins .element { .center-block(); }
这个看似简单的问题隐藏着复杂性。 所有的答案都有一些问题。
1.创build一个自定义类（主要难题）
创build.col-centred类，但有一个主要的陷阱。
.col-centred { float: none !important; margin: 0 auto; } <!-- Bootstrap 3 --> <div class="col-lg-6 col-centred"> Centred content. </div> <!-- Bootstrap 2 --> <div class="span-6 col-centred"> Centred content. </div>
Gotcha
引导程序要求列加起来为12.如果它们不重叠，这是一个问题。 在这种情况下，居中的列将与其上方的列重叠。 在视觉上，页面可能看起来是一样的，但鼠标事件不会在重叠的列上工作（例如，您不能hover或单击链接）。 这是因为鼠标事件正在与您尝试点击的元素重叠的居中列上注册。
修复
您可以通过使用clearfix元素来解决此问题。 使用z-index将居中的列置于底部将不起作用，因为它本身将被重叠，因此鼠标事件将对其起作用。
<div class="row"> <div class="col-lg-12"> I get overlapped by `col-lg-7 centered` unless there's a clearfix. </div> <div class="clearfix"></div> <div class="col-lg-7 centred"> </div> </div>
或者你可以在自己的行中隔离居中的列。
<div class="row"> <div class="col-lg-12"> </div> </div> <div class="row"> <div class="col-lg-7 centred"> Look I am in my own row. </div> </div>
2.使用col-lg-offset-x或spanx-offset（Major Gotcha）
<!-- Bootstrap 3 --> <div class="col-lg-6 col-lg-offset-3"> Centred content. </div> <!-- Bootstrap 2 --> <div class="span-6 span-offset-3"> Centred content. </div>
第一个问题是你居中的列必须是一个偶数，因为偏移值必须均匀分配2以布局居中（左/右）。
其次，正如一些人所评论的那样，使用偏移量是一个坏主意。 这是因为当浏览器resize时，偏移量会变成空白，将实际内容向下推送。
3.创build一个内心居中的列
在我看来这是最好的解决scheme。 根据解决scheme1和解决scheme2，不需要进行黑客攻击，也不会造成网格混乱，从而导致意想不到的后果。
.col-centred { margin: 0 auto; } <div class="row"> <div class="col-lg-12"> <div class="centred"> Look I am in my own row. </div> </div> </div>
将宽度定义为960像素，或者你喜欢的任何东西，你就可以走了！
#main { margin: 0 auto !important; float: none !important; text-align: center; width: 960px; }
（我无法弄清楚，直到我固定的宽度，没有别的工作。）
