如何使用'spanX'类将Bootstrap div居中？

Question

我使用bootstrap并尝试将div(span7)置于中心位置:

<div class="row-fluid">
    <div id="main" class="span7">
        Lorem ipsum dolor sit amet
    </div>
</div>

我的css代码是:

#main{
    margin:0px auto;
}

但它不是设在中心.我怎样才能设置中心？

Answer 1

Twitter的引导.span类浮动到左侧,因此它们不会以通常的方式居中.因此,如果您希望它span只是添加float:none到您的#main规则中心.

CSS

#main {
 margin:0 auto;
 float:none;
}

Answer 2

顺便提一下,如果你的span类是偶数(例如span8)你可以添加一个offset类来使它居中 - 因为span8它将是offset2(假设默认的12列网格),因为span6它将是offset3等等(基本上是剩余数量的一半)如果span从网格中的总列数中减去-number,则为列.

UPDATE Bootstrap 3 重命名了很多类,所以所有的span*类都应该是col-md-*,offset类应该是col-md-offset-*,假设你使用的是中型响应网格.

我在这里创建了一个快速演示,希望它有所帮助:http://codepen.io/anon/pen/BEyHd.

Answer 3

如果有人想要使用bootstrap row-fluid在一个范围内使用BOTH图像和文本居中的真正解决方案,这里是(如何实现这个和解释遵循我的例子):

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,text-align:center和display:block的组合可以处理图像和段落.

请告诉我这是否足够简单,以便于实施.