如何将一个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; } 

(我无法弄清楚,直到我固定的宽度,没有别的工作。)