如何将Bootstrap div与“ spanX”类居中？

我使用引导程序，并试图像这样将div（span7）居中：

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

我的CSS代码是：

#main{
    margin:0px auto;
}

但这并不是中心。如何设置中心？

编辑

span7现在col-7位于Bootstrap 4中，不建议使用行流体（请使用container-fluid和代替row）。

Twitter的引导程序.span类浮动在左侧，因此它们不会以通常的方式居中。因此，如果您希望它居中，span只需将其添加float:none到#main规则中即可。

的CSS

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

顺便说一下，如果你的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。

如果有人想要使用引导行流体在跨度内将两个图像和文本居中的真正解决方案，那就是（如何实现这一点，并按照我的示例进行解释）：

的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起作用是因为我们要覆盖特定的引导程序样式。与发布的其他答案的显着区别是宽度和高度设置为自动，因此您不必使用固定的（对于动态网页而言）。同样，将页边距设置为自动，text-align：center和display：block的组合可以同时处理图像和段落。

让我知道这是否足够容易实施。

更新资料

从BS3开始，有一个.center-block帮助器类。从文档：

// Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

在这个看似简单的问题中隐藏着复杂性。给出的所有答案都有一些问题。

1.创建一个自定义类（主要知识）

创建.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>

陷阱

Bootstrap要求列的总数为12。如果不相加，它们将重叠，这是一个问题。在这种情况下，居中的列将与上方的列重叠。外观上页面看起来相同，但是鼠标事件在重叠的列上不起作用（例如，您不能悬停或单击链接）。这是因为鼠标事件在与您尝试单击的元素重叠的居中列上注册。

修复

您可以通过使用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（主要问题）

<!-- 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才能使布局居中（左/右）。

其次，正如一些人所评论的那样，使用偏移量是一个坏主意。这是因为当浏览器调整大小时，偏移量将变成空白，从而将实际内容向下推到页面上。

3.创建一个内部居中列

我认为这是最好的解决方案。根据解决方案1和2，无需进行黑客干预，也不必乱搞网格，这可能会导致意想不到的后果。

.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>

将宽度定义为960px或任何您喜欢的宽度，就可以了！

#main {
 margin: 0 auto !important;
 float: none !important;
 text-align: center;
 width: 960px;
}

（直到确定宽度，我才能弄清楚这一点，其他方法无济于事。）